Selector de color: hexadecimal, RGB, HSL, y el control de contraste que omití.

Nuestra marca naranja es #E99537. Me gusta eso. Es cálido, no es el mismo naranja que todos los demás, y se encuentra junto a nuestro azul sin pelear.

Lo usé como color de enlace en blanco durante meses.

Entonces, en realidad, corrí los números. #E99537 según #FFFFFF da una relación de contraste de 2.38:1. WCAG 2.1 SC 1.4.3 Requiere 4.5:1 para el texto normal. Ni siquiera despeja el 3:1 bar para abultado texto. Cada enlace naranja en ese sitio era, según el estándar que decía que me importaba, ilegible, y me había parecido perfectamente bien, en mi monitor, en mi oficina, con los ojos.

Eso es lo que pasa con el color: tu percepción de él no es una medida. #E99537 en nuestra marina #0F172A montones 7.50:1, cómodamente AAA. El mismo color, veredicto completamente diferente, y ninguna cantidad de entrecerrar los ojos me lo habría dicho. Tienes que calcularlo.

los selector de colores En Toolz.dev se convierte entre hex, RGB y HSL y le muestra la relación de contraste, en el navegador, sin carga. Esta guía es lo que me gustaría que hubiera leído antes de enviar esos enlaces.

TL;Dr: aprovechamiento aojo Para valores estáticos, SNA Siempre que necesite obtener un color (estados hover, paletas, modo oscuro) porque la luminosidad es un número del que puede restar, y RGBA/HSLA cuando necesitas alfa. El contraste es 4,5:1 para el cuerpo del texto y 3:1 para el texto grande; compruébalo, don't eyeball it. selector de colores ¿Las conversiones y la relación? Luego tome sus paradas a la Generador de gradiente.

Hex, RGB, HSL: ¿Cuál es la diferencia real?

Todos ellos describen los mismos colores sRGB. Lo que difiere es qué preguntas cada uno hace fácil de responder.

aojo

Tres bytes en hexadecimal. #4466EE es rojo 44 (68), verde 66 (102), azul EE (238). taquigráfico #RGB funciona sólo cuando cada par está duplicado - #FF0000 se derrumba a #F00, pero #4466EE no se puede acortar. El formulario de 8 dígitos agrega alfa: #4466EE80 es aproximadamente 50% opaco.

Es el valor predeterminado en CSS porque es compacto y sin ambigüedades. También es completamente opaco a la lectura humana, por lo que nunca he mirado un código hexadecimal y he sabido qué cambiar para que sea un poco menos saturado.

RGB

Los mismos tres canales, decimal, 0–255. La sintaxis CSS color 4 moderna elimina las comas: rgb(68 102 238 / 80%). RGB es lo que quieres en JavaScript, Canvas y WebGL, porque es el formato que todo lo que realmente consume Downstream y puedes hacer aritmética en él.

HSL: el que se gana su lugar

Tono (0–360° alrededor de la rueda), saturación (0–100%), ligereza (0–100%). #4466EE es hsl(228, 83%, 60%).

Por eso importa eso. Un estado de botón de botón debe ser del mismo color, un poco más oscuro. En hexadecimal, esa es una pregunta sin respuesta. En HSL se sustituye:

.btn {
  background: hsl(228 83% 60%);   /* #4466EE */
}
.btn:hover  { background: hsl(228 83% 52%); }  /* darker  */
.btn:active { background: hsl(228 83% 44%); }  /* darker still */
.btn:disabled { background: hsl(228 22% 70%); } /* desaturated, lifted */

Cuatro estados, un tono, ninguna herramienta de diseño. Esta es el 90% de por qué HSL está en mi kit de herramientas.

El problema, y es real, es que la ligereza HSL lo es no perceptivo. hsl(60 100% 50%) (amarillo) y hsl(240 100% 50%) (Azul) Ambos reclaman un 50% de ligereza, y uno de ellos quemará tus retinas mientras que la otra es casi negra. Ese es el problema que Oklch resuelve.

Oklch, brevemente

Nivel de color CSS 4 trae oklch(L C H), donde estoy percibido ligereza. Dos colores con el mismo L se ven igualmente brillantes. Es la herramienta adecuada para generar una rampa tonal donde cada paso se siente uniformemente espaciado, y es lo que uso hoy para un nuevo sistema de diseño. También es por eso linear-gradient(in oklch, blue, yellow) no'Me pongo gris en el medio - ver el Guía del generador de gradiente CSS.

CMYK

Imprimir solo. CSS no tiene CMYK. Si una guía de marca le entrega valores CMYK, alguien tiene que convertirlos a sRGB, y la conversión es aproximada porque las gamas realmente difieren: hay cians que una impresora puede alcanzar y su monitor puede 't, y viceversa. Conseguir a la vez Valores definidos en la guía de marca en lugar de convertir uno al otro y esperar.

¿Cómo convierto entre ellos?

Hex → RGB es solo una conversión base. #4466EE → Dividido en 44, 66, EE → 68, 102, 238.

RGB → HSL implica encontrar canales máximo/min, derivando ligereza de su promedio, luego saturación y matiz desde allí. Son quince líneas de código, y he escrito esas quince líneas de memoria exactamente cero veces. Para una sola vez, el selector de colores lo hace al instante. Para código:

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

Y el que realmente importa: luminancia relativa y relación de contraste, directamente del Definición WCAG:

const luminance = (hex) => {
  const { r, g, b } = hexToRgb(hex);
  const [R, G, B] = [r, g, b]
    .map(v => v / 255)
    .map(v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

const contrast = (a, b) => {
  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

contrast('#E99537', '#FFFFFF'); // 2.38  ← the one that got me
contrast('#E99537', '#0F172A'); // 7.50

Tenga en cuenta esos coeficientes verdes: 0.2126 rojo, 0.7152 verde, 0.0722 azul. El verde lleva aproximadamente setenta por ciento de brillo percibido. Por eso, un verde brillante y un azul brillante con una ligereza HSL idéntica no se parecen en nada, y es la razón por la que existen espacios de color perceptivo.

¿Qué proporciones de contraste tengo que alcanzar?

Algunos números reales, todos calculados en lugar de adivinados:

Dos cosas se caen de esa mesa.

#767676 es el gris más claro que pasa AA en blanco. no #888, no #999. Cada color secundario apagado que veo en la naturaleza es un tono o dos más allá. Vale la pena memorizar.

El mismo color de marca puede pasar y fallar dependiendo de dónde lo pongas. Nuestra naranja no se puede usar como enlace en blanco y excelente como acento en azul marino. Eso no es un defecto en el color; es una limitación sobre dónde se permite vivir el color. Una vez que lo enmarqué de esa manera, la decisión de diseño se volvió más fácil, no más difícil.

¿Cómo construyo una paleta que no se pelea consigo?

Elige un tono. Variar ligereza. Ese es todo el método, y HSL lo hace mecánico:

:root {
  /* One hue: 228. Nine steps of lightness. */
  --blue-50:  hsl(228 83% 96%);
  --blue-100: hsl(228 83% 91%);
  --blue-200: hsl(228 83% 84%);
  --blue-300: hsl(228 83% 76%);
  --blue-400: hsl(228 83% 68%);
  --blue-500: hsl(228 83% 60%);  /* #4466EE — the brand colour */
  --blue-600: hsl(228 83% 50%);
  --blue-700: hsl(228 78% 41%);
  --blue-800: hsl(228 72% 33%);
  --blue-900: hsl(228 66% 25%);
}

Observe que la saturación cae ligeramente en el extremo oscuro. Mantener constante la saturación mientras cae la ligereza produce pasos que parecen cada vez más duros y neón: una pequeña desaturación en la parte inferior es lo que hace que una rampa se sienta diseñada en lugar de generada.

Entonces nombra las cosas por oficio, no por apariencia, por lo que un cambio de marca es un cambio de una línea en lugar de encontrar y reemplazar en cuarenta archivos:

:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: #0F172A;
  --color-text-muted: #6B7280;   /* 4.83:1 on white — checked */
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--blue-400);  /* lift it — dark bg needs a lighter primary */
    --color-text: #F8FAFC;
    --color-text-muted: #9CA3AF;
    --color-surface: #1E293B;
    --color-border: #374151;
  }
}

El modo oscuro no es una inversión

No voltees tu paleta. Dos cosas se rompen de inmediato:

1. Los colores saturados se vuelven más fuertes en los fondos oscuros. Un azul vivo que se lee como "profesional" en blanco lee como "vibración" en casi negro. Levanta la ligereza, la saturación de gotas un poco.
2. Los fondos negros puros causan halation- text luminoso activado #000 Manchas para personas con astigmatismo. Usa un azul grisáceo muy oscuro (#0F172A, #111827) en cambio. También te da un lugar para buscar superficies elevadas, que el negro puro no hace.

Esquemas de armonía, honestamente

La regla a la que sigo volviendo: Una primaria, un acento, una rampa gris. Todo más allá de eso tiene que justificar su existencia.

¿Qué más hace que la gente haga tropezar?

El color solo nunca es suficiente

Alrededor de 1 de cada 12 hombres y 1 de cada 200 mujeres tienen algún tipo de deficiencia de visión de color. Si el rojo-means-error y verde-significa-éxito es su sólo Signal, una parte significativa de sus usuarios ve dos insignias grises idénticas. Agregar un icono, agregar una palabra. WCAG SC 1.4.1 es explícito sobre esto y le cuesta una <span>.

La prueba de un segundo: captura de pantalla de tu interfaz de usuario, desaturarla y ver si todavía funciona. Si no, el color está haciendo un trabajo de carga, no debería hacerse solo.

Los anillos de enfoque también necesitan contraste

Los indicadores de enfoque son componentes de la interfaz de usuario y caen bajo la regla 3:1 contra adyacente colores, lo que significa que un anillo de enfoque debe contrastar tanto con el elemento que rodea como con la página detrás de él. Un sutil contorno azul en un botón azul es un fallo común y completamente invisible.

Diseño en gris primero

Construya todo el diseño en escala de grises. Obliga a que la jerarquía provenga del tamaño, el peso y el espaciado, que es donde se encuentra la jerarquía debería ven de. Añade color al final, como énfasis. Las interfaces construidas de esta manera son accesibles casi por accidente, y sobreviven en modo oscuro sin reescritura.

Usando el selector de color

1. Abre el selector de colores.
2. Arrastre en el espectro o pegue un valor conocido en el campo HEX, RGB o HSL; los demás se actualizan en el paso.
3. Tenga en cuenta la HSL. Ese es su formato de trabajo.
4. Genere la rampa manteniendo H y S y l.
5. Compruebe cada par de texto/fondo con la línea 4.5:1 antes de que Entra en una hoja de estilo, no después de que un cliente te envíe un correo electrónico al respecto.

Todo se ejecuta en tu pestaña. No se carga nada; puede confirmarlo en el panel DevTools Network en unos diez segundos.

Preguntas frecuentes

¿Cuál es la diferencia entre hexadecimal y RGB?

Nada, semánticamente, codifican los mismos tres canales sRGB. HEX los escribe en base 16 (#4466EE), RGB en decimal (rgb(68 102 238)). Hex es más compacto y es la convención CSS; RGB es más fácil de calcular en JavaScript. Elige por contexto, no por principio.

¿Qué formato de color debo usar en CSS?

Hex para valores estáticos que solo estás transcribiendo. HSL en cualquier momento que necesite obtener un color (estados flotantes, estados deshabilitados, una rampa tonal, una variante en modo oscuro) porque la ligereza es un número que puedes ajustar. HSLA o RGBA cuando necesitas alfa. OKLCH si usted ' Estamos construyendo un nuevo sistema de diseño y queremos pasos perceptivamente uniformes.

¿Cómo sé si mis colores son accesibles?

Calcule la relación de contraste. WCAG 2.1 AA necesita 4,5:1 para texto normal, 3:1 para texto grande (18pt o 14pt en negrita) y para componentes de interfaz de usuario. No juzgues a ojo - #E99537 En blanco se ve bien y anota 2.38:1. También verifique que no se transmita información solo por el color.

¿Cuál es el gris más claro que puedo usar para el texto en blanco?

#767676, que aterriza en 4,54:1, apenas por encima de la línea AA de 4,5:1. #999999 es sólo 2.85:1 y falla. Si quieres AAA, #595959 Llega exactamente a las 7.00:1.

¿Por qué la ligereza HSL no coincide con el brillo percibido?

Porque HSL es una transformada matemática simple de RGB, no un modelo de visión humana. El ojo es mucho más sensible al verde que al azul: la fórmula de luminancia WCAG pesa verde en 0,7152 y azul en 0,0722, entonces hsl(60 100% 50%) (amarillo) y hsl(240 100% 50%) (Azul) No se parece en nada a pesar de que ambos reclaman un 50% de ligereza. Oklch existe específicamente para arreglar esto.

¿Cómo construyo una paleta de modo oscuro?

No inviertas el de la luz. Construya una segunda paleta: un fondo gris-azul oscuro en lugar de negro puro (el negro puro causa halatación para los lectores con astigmatismo), versiones más claras y ligeramente menos saturadas de sus acentos y texto que es blanquecino en lugar de #FFFFFF. Cambie con propiedades personalizadas de CSS en prefers-color-scheme: dark.

¿Cuál es el mejor color para un botón de llamada a la acción?

Hay't uno. La evidencia de "el naranja se convierte en mejor y quot; es delgada y principalmente folclórica. Lo que importa es que la CTA contrasta con todo lo que la rodea y que el mismo color significa lo mismo en todas partes del sitio. Si su página es mayoritariamente azul, funciona una CTA naranja, debido al contraste, no al naranja.

¿Puedo usar colores CMYK en la web?

No, CSS no tiene notación CMYK y las gamas don't se asignan limpiamente, por lo que cualquier conversión es una aproximación. Si necesita coherencia de marca en la impresión y la pantalla, defina ambos valores en la guía de marca desde el principio en lugar de convertir uno en otro.

¿Cómo convierto un color hexadecimal a RGB?

Divida el hex de seis dígitos en tres pares y lea cada par como un número base-16 de 0 a 255. #4466EE se convierte en rgb(68, 102, 238): 44 es 68, 66 es 102 y EE es 238. una abreviatura de tres dígitos como #46E Se expande primero al duplicar cada dígito. El selector de color hace esta conversión al instante, en ambas direcciones.

¿Qué es un código de color hexadecimal?

Un código de color hexadecimal es una representación base-16 de seis dígitos de un color sRGB, usando dos dígitos cada uno para los canales rojo, verde y azul después de un líder #. #FFFFFF es blanco y #000000 es negro. Un séptimo y un octavo dígito opcional agregan un canal alfa (opacidad), como en #4466EE80.

envolviendo

El trabajo en color tiene dos mitades y la mayoría de nosotros sólo hacemos la primera. Elegir una paleta es la mitad divertida y subjetiva. Verificarlo (luminancia, contraste, legibilidad daltónica, comportamiento en modo oscuro) es la mitad de eso ' es solo aritmética, y es ' es la mitad que decide si la gente realmente puede leer lo que construiste.

La aritmética no es difícil. es solo algo que tienes que tener el origen, y no, durante meses, en mi propio sitio, en un color que elegí yo mismo.

los selector de colores Convierte entre HEX, RGB y HSL y te brinda la relación de contraste, gratuita y completamente en tu navegador. emparejarlo con el Generador de gradiente Para mezclas que mantienen su contraste de extremo a extremo, y vean el resto del estante en el Guía de herramientas de productividad para desarrolladores.