HEX
Cada par define rojo, verde y azul en base 16. Es frecuente en tokens, guias de estilo y hojas CSS.
Programacion
Paleta HEX, RGB y HSL
Convierte colores para CSS, genera una escala 50-900 y revisa contraste WCAG desde una sola herramienta.
Color para CSS
Convierte y exporta tu paleta
Contraste WCAG
Ratio
7.58:1
Nivel
AAA
Texto sugerido
#000000
Negro: 7.58:1 / Blanco: 2.77:1
Escala 50-900
50
#ECF8FD
100
#D8F1FB
200
#B2E2F8
300
#8BD4F4
400
#51BEEF
500
#0EA5E9
600
#0C91CD
700
#0A77A8
800
#085C82
900
#06425D
CSS variables
--color-primary
:root {
--color-primary: #0EA5E9;
--color-primary-rgb: 14 165 233;
--color-primary-hsl: 199 89% 48%;
--color-primary-50: #ECF8FD;
--color-primary-100: #D8F1FB;
--color-primary-200: #B2E2F8;
--color-primary-300: #8BD4F4;
--color-primary-400: #51BEEF;
--color-primary-500: #0EA5E9;
--color-primary-600: #0C91CD;
--color-primary-700: #0A77A8;
--color-primary-800: #085C82;
--color-primary-900: #06425D;
}
.button-primary {
background: var(--color-primary);
color: #000000;
}Publicidad
Ejemplos rapidos
Colores comunes para interfaces y estados de producto.
Color en CSS
HEX es compacto, RGB es directo para canales y HSL suele ser mas comodo para ajustar tono, saturacion y luminosidad.
RGB
Usa canales de 0 a 255. La sintaxis moderna permite guardar canales como variables y aplicar transparencia despues.
HSL
Separa tono, saturacion y luminosidad. Es practico para crear variantes claras y oscuras de un color base.
Preguntas frecuentes
Que diferencia hay entre HEX, RGB y HSL?
HEX representa colores con valores hexadecimales, RGB usa canales rojo, verde y azul de 0 a 255, y HSL organiza el color por tono, saturacion y luminosidad.
Como convierto HEX a RGB?
Cada par hexadecimal se convierte a decimal: los dos primeros digitos son rojo, los dos siguientes verde y los dos ultimos azul.
Como genero variables CSS desde un color?
La herramienta toma el color base, calcula sus valores HEX, RGB y HSL, genera una escala 50-900 y arma declaraciones CSS con el nombre de variable elegido.
Que es una escala de color 50-900?
Es una familia de tonos donde 500 suele ser el color base, los pasos bajos son mas claros y los pasos altos son mas oscuros.
Que es el contraste WCAG?
Es una relacion numerica entre el color de texto y el color de fondo. Para texto normal, AA requiere al menos 4.5:1 y AAA al menos 7:1.
Que color de texto conviene sobre un fondo?
La calculadora compara blanco y negro sobre el fondo seleccionado y recomienda el que obtiene mayor contraste.
Puedo compartir una paleta por URL?
Si. La pagina actualiza parametros como color, name, bg y text para que puedas copiar el enlace con la configuracion actual.