Conversor de Formatos de Color
Color
Elige un color con el selector nativo o pega un HEX y míralo al instante en todos los formatos CSS comunes — HEX, RGB moderno separado por espacios, RGB clásico con comas, HSL, HSV, OKLCH (el espacio perceptualmente uniforme que prefiere el CSS moderno) y una variable CSS lista para pegar. Cada valor con su propio botón de copiar.
- HEX
#3B82F6 - RGB
rgb(59 130 246) - RGB (legacy)
rgb(59, 130, 246) - HSL
hsl(217 91% 60%) - HSV
hsv(217, 76%, 96%) - OKLCH
oklch(62.3% 0.188 259.8) - Variable CSS
--color: #3B82F6;
Cómo usar
- Usa el selector o pega un HEX (3 o 6 dígitos, # opcional).
- Todos los formatos se actualizan al instante.
- Copia el formato que necesites con el botón a la derecha.
Preguntas frecuentes
- ¿Qué es OKLCH?
- Un espacio de color perceptualmente uniforme — las distancias numéricas se sienten como distancias visuales iguales. El CSS moderno lo soporta nativamente y herramientas como Figma 2024+ lo están adoptando para gradientes más suaves y mejor contraste.
- ¿Por qué dos filas RGB?
- El CSS moderno usa espacios 'rgb(59 130 246)'; el legacy y navegadores antiguos esperan comas 'rgb(59, 130, 246)'. Producen el mismo color.
- ¿Y la transparencia (RGBA/HSLA)?
- Esta herramienta se centra en colores opacos. Para transparencia, añade '/ 0.5' en la sintaxis moderna (ej: 'rgb(59 130 246 / 0.5)') o usa la clásica 'rgba(…, 0.5)'.
- ¿HSV es lo mismo que HSB?
- Sí — HSV (Value) y HSB (Brightness) son dos nombres para el mismo modelo. CSS no acepta hsv() directamente; usa HSL para hojas de estilo.
Herramientas relacionadas
Paleta de Color desde Imagen
Suelta una imagen y la herramienta extrae una paleta de colores dominantes vía Canvas — copia HEX o llévate el set completo.
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Generador de CSS Box Shadow
Diseña box-shadow CSS visualmente con varias capas, vista previa en vivo y salida CSS / Tailwind lista para copiar.
Generador de Gradientes CSS
Crea gradientes CSS lineales o radiales con varias paradas de color y copia el código.
Generador de Paleta de Colores
Crea paletas armoniosas desde un color base con seis esquemas.
Comprobador de Contraste de Color
Comprueba el contraste texto/fondo según los niveles WCAG AA y AAA.