¿Cuál es la diferencia entre HEX, RGB y HSL?

HEX es una notación hexadecimal en formato #RRGGBB, la más comúnmente utilizada en CSS. RGB expresa el color mediante la combinación de rojo (0-255), verde (0-255) y azul (0-255). HSL lo expresa mediante tono (Hue, 0-360), saturación (Saturation, 0-100 %) y luminosidad (Lightness, 0-100 %), siendo el más cercano a la percepción intuitiva humana.

¿Qué es OKLCH y por qué se utiliza?

OKLCH es un espacio de color CSS moderno perceptualmente uniforme (perceptually uniform). En el HSL tradicional, incluso con la misma saturación y luminosidad, el brillo percibido variaba según el tono. OKLCH resuelve este problema, lo que lo hace ventajoso para generar paletas de colores consistentes. Está incluido en el estándar CSS Color Level 4.

¿Cómo se utiliza el valor alfa (transparencia)?

El valor alfa es un número entre 0 (completamente transparente) y 1 (completamente opaco) que indica la transparencia del color. En CSS se utiliza como rgba(59, 130, 246, 0.5), y en HEX se añaden 2 dígitos al final como #3B82F680. Se emplea en superposiciones, sombras, fondos, entre otros.

¿Existen criterios de selección de colores para la accesibilidad web?

Según las directrices WCAG 2.1, la relación de contraste de luminosidad entre el texto y el fondo debe ser de al menos 4,5:1 para texto normal y 3:1 para texto grande. Al seleccionar colores, es importante verificar el contraste con el color de fondo para garantizar que las personas con discapacidad visual también puedan leer el contenido.

¿Cómo aplico los códigos de color de una herramienta de diseño en CSS?

Al introducir en esta herramienta el código HEX copiado de herramientas de diseño como Figma o Sketch, se convierte automáticamente a formatos utilizables en CSS como RGB y HSL. Gestionar los colores mediante variables CSS facilita el cambio de tema, y el formato HSL es conveniente para ajustar la luminosidad y la saturación.

Selector de Color - HEX RGB HSL HSV OKLCH Convertidor | Gratis

Seleccionar Color

RGB

Valores de Color

HEX

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

Paleta de Colores

Clic para seleccionar y copiar

base

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Formatos de Color

HEX

Formato #RRGGBB. El más usado en CSS

RGB

Rojo, Verde, Azul (0-255)

HSL

Tono, Saturación, Luminosidad. Ajuste intuitivo de color

HSV/HSB

Tono, Saturación, Valor. Usado en herramientas gráficas

OKLCH

Espacio de color CSS moderno perceptualmente uniforme

RGBA/HSLA

Incluye canal alfa (transparencia)

¿Qué es un selector de colores?

El selector de colores (Color Picker) es una herramienta en línea que permite convertir códigos entre diversos modelos de color y seleccionar colores visualmente. Los códigos de color precisos son esenciales en el desarrollo web, diseño UI/UX y diseño gráfico. Esta herramienta admite los principales formatos de color como HEX, RGB, HSL, HSV y OKLCH, y permite explorar colores mediante controles deslizantes intuitivos y paletas, además de copiar códigos instantáneamente. También admite el canal alfa (transparencia) para trabajar con colores semitransparentes.

Conversión mutua entre 5 formatos de color: HEX, RGB, HSL, HSV y OKLCH
Selector intuitivo con deslizadores de color y área de selección de color
Compatibilidad con el ajuste del canal alfa (transparencia)
Copia del código de color con un solo clic
Función de generación de colores aleatorios
Paletas de colores básicas y avanzadas incluidas

Cómo usar

1
Seleccionar un color
Arrastre el deslizador de color o haga clic en el área de selección de color para elegir el color deseado. También puede introducir directamente un código HEX u otro formato.
2
Verificar los formatos
El color seleccionado se convierte automáticamente y se muestra en todos los formatos: HEX, RGB, HSL, HSV y OKLCH.
3
Ajustar la transparencia
En la pestaña alfa puede ajustar la transparencia en un rango de 0 a 100 % para crear colores semitransparentes.
4
Copiar el código
Al hacer clic en el valor del formato de color que necesite, se copiará automáticamente al portapapeles. Péguelo directamente en su CSS, herramientas de diseño, etc.

Preguntas frecuentes

Consejos

Con el formato HSL, ajustando solo la luminosidad (L) puede crear fácilmente variaciones claras y oscuras del mismo color, lo que resulta ventajoso para el trabajo con colores de tema.
Obtenga inspiración con la función de color aleatorio y luego realice ajustes finos con el deslizador de color para crear paletas creativas.
Al usarlo junto con CSS custom properties (variables), el cambio de colores entre modo oscuro y modo claro resulta sencillo.
Haga clic en los colores de uso frecuente de la paleta de colores para copiar rápidamente su código.
Utilice el formato OKLCH para diseñar un sistema de colores con saturación y brillo perceptualmente consistentes.

¿Qué es un selector de colores?

Conversión mutua entre 5 formatos de color: HEX, RGB, HSL, HSV y OKLCH

Selector intuitivo con deslizadores de color y área de selección de color

Compatibilidad con el ajuste del canal alfa (transparencia)

Copia del código de color con un solo clic

Función de generación de colores aleatorios

Paletas de colores básicas y avanzadas incluidas

Cómo usar

Seleccionar un color

Arrastre el deslizador de color o haga clic en el área de selección de color para elegir el color deseado. También puede introducir directamente un código HEX u otro formato.

Verificar los formatos

El color seleccionado se convierte automáticamente y se muestra en todos los formatos: HEX, RGB, HSL, HSV y OKLCH.

Ajustar la transparencia

En la pestaña alfa puede ajustar la transparencia en un rango de 0 a 100 % para crear colores semitransparentes.

Copiar el código

Al hacer clic en el valor del formato de color que necesite, se copiará automáticamente al portapapeles. Péguelo directamente en su CSS, herramientas de diseño, etc.

Consejos

Con el formato HSL, ajustando solo la luminosidad (L) puede crear fácilmente variaciones claras y oscuras del mismo color, lo que resulta ventajoso para el trabajo con colores de tema.

Obtenga inspiración con la función de color aleatorio y luego realice ajustes finos con el deslizador de color para crear paletas creativas.

Al usarlo junto con CSS custom properties (variables), el cambio de colores entre modo oscuro y modo claro resulta sencillo.

Haga clic en los colores de uso frecuente de la paleta de colores para copiar rápidamente su código.

Utilice el formato OKLCH para diseñar un sistema de colores con saturación y brillo perceptualmente consistentes.