Colores y degradados

HEX, RGB, HSL, OKLCH, contraste y degradados

Sin base de datos: AIMRAN no guarda tus archivos, textos ni resultados

¿Qué es Colores y degradados?

Elige o pega un color y verás su código en todos los formatos que usan los diseñadores y programadores web: HEX, RGB, HSL, HWB y OKLCH. También genera una gama de tonos más claros y más oscuros del mismo color.

Además comprueba si un texto de ese color se lee bien sobre un fondo, según las normas de accesibilidad, y te ayuda a crear degradados CSS listos para copiar.

Cómo se usa

  1. Escribe un color en cualquier formato (#0071e3, rgb(…), hsl(…), oklch(…) o un nombre CSS) o usa el selector.
  2. Copia el formato que necesites en «Formatos».
  3. Elige un color de fondo en «Contraste WCAG» para ver si pasa AA y AAA.
  4. Haz clic en un tono para usarlo como color principal.
  5. En «Degradado CSS», elige tipo lineal, radial o cónico, ajusta ángulo y paradas y copia el CSS.

Ventajas

Detalles técnicos

Admite HEX de 3, 4, 6 u 8 dígitos, rgb()/rgba(), hsl()/hsla(), hwb(), oklch() y los nombres de color CSS, con canal alfa. Las conversiones HSL y HWB son las de CSS Color Module Level 4; OKLCH se calcula a partir de sRGB lineal mediante el espacio Oklab de Björn Ottosson. El contraste sigue WCAG 2.x: luminancia relativa L = 0,2126 R + 0,7152 G + 0,0722 B sobre componentes linealizados y razón (L1 + 0,05) / (L2 + 0,05); se exige 4,5:1 para AA en texto normal, 3:1 para AA en texto grande, 7:1 para AAA normal y 4,5:1 para AAA grande. Los colores semitransparentes se componen sobre el fondo antes de medir. Los tonos se obtienen mezclando con blanco y negro en pasos del 15 %. Los degradados generan linear-gradient, radial-gradient o conic-gradient con paradas y posiciones editables.

Preguntas frecuentes

¿Cómo convierto un color HEX a RGB?

Pega el código HEX y la herramienta muestra al momento su equivalente en RGB, HSL, HWB y OKLCH. Por ejemplo, #0071e3 es rgb(0, 113, 227).

¿Qué contraste mínimo exige la accesibilidad web?

Las WCAG piden una relación de 4,5:1 entre texto y fondo para el nivel AA en texto normal y 3:1 en texto grande. El nivel AAA exige 7:1 y 4,5:1.

¿Qué es OKLCH?

Un formato de color moderno de CSS basado en luminosidad, croma y tono percibidos. Facilita crear paletas coherentes porque cambiar la luminosidad no altera el tono visible.

¿Cómo hago un degradado en CSS?

En «Degradado CSS» elige el tipo, el ángulo y los colores de cada parada, y copia la propiedad background generada.

¿Qué diferencia hay entre HSL y HEX?

Ambos describen el mismo color. HEX lo expresa en hexadecimal como rojo, verde y azul; HSL lo hace con tono, saturación y luminosidad, más intuitivo para ajustar.

Más herramientas de Desarrolladores