Ancla exacta
El valor sRGB de respaldo renderizado ocupa la luminosidad objetivo más cercana y se conserva sin cambios.
Volver al catálogo de colores
Escala perceptual para UI
Convierte un color en un sistema de trabajo.
Introduce HEX, RGB, HSL, HWB, OKLCH o un nombre de color CSS. Hexees conserva el color de origen como ancla más cercana y construye a su alrededor los pasos 50–950 en OKLCH.
01 / 11 pasos medidos
Una escala que puedes comprobar, no solo admirar.
Cada fila muestra el valor sRGB renderizado, la fórmula OKLCH y la relación de contraste del texto negro o blanco. El valor sRGB de respaldo se conserva sin sustituirlo en silencio.
oklch(97% 0.02961 303.373)Texto negro 19,05:1 Texto blanco 1,10:1Adaptado a sRGB Inspeccionar coloroklch(93% 0.05424 303.373)Texto negro 16,78:1 Texto blanco 1,25:1Adaptado a sRGB Inspeccionar coloroklch(22% 0.11739 303.373)Texto negro 1,17:1 Texto blanco 17,92:1Adaptado a sRGB Inspeccionar color
02 / Muestra de interfaz
Observa el sistema haciendo un trabajo real.
La muestra asigna los pasos al lienzo, la superficie, el borde, el texto, el contenido atenuado y una acción. Es una composición inicial, no una garantía de accesibilidad.
COLOR SYSTEM / #663399
Color con una jerarquía clara.
Una escala útil separa la estructura del énfasis antes de añadir decoración a la interfaz.
Revisar sistema03 / CSS
Copia los once tokens CSS.
La exportación usa nombres estables de 50 a 950 y valores sRGB de respaldo de seis dígitos para una amplia compatibilidad con navegadores.
:root {
--color-brand-50: #F9F1FF;
--color-brand-100: #EFE0FF;
--color-brand-200: #DDC3FF;
--color-brand-300: #C19DF1;
--color-brand-400: #A579DB;
--color-brand-500: #8957C0;
--color-brand-600: #663399;
--color-brand-700: #552283;
--color-brand-800: #3D0D65;
--color-brand-900: #270045;
--color-brand-950: #120026;
}04 / Método y límites
Medido, determinista y transparente sobre la gama de color.
Espaciado OKLCH
Los pasos de luminosidad objetivo comparten el matiz del ancla y ajustan el croma mediante una envolvente de luminosidad. Los resultados fuera de la gama sRGB se adaptan con el algoritmo CSS Color 4 del proyecto y quedan señalados.
Comprobaciones de pares, no conformidad
Se calculan las relaciones con negro y blanco para cada valor renderizado. Los componentes finales aún requieren pruebas de texto, elementos no textuales, estados e indicadores de navegación por teclado.