Rotación perceptual del tono
Los ángulos de armonía giran el tono de origen en OKLCH y conservan su luminosidad y croma. El primer color siempre mantiene exactamente el valor sRGB introducido.
← Volver al catálogo de colores
Brújula cromática OKLCH
Convierte un color en una paleta lista para trabajar.
Traza relaciones cromáticas reales sobre una rueda perceptual. El color de origen se mantiene exacto, cada compañero se adapta honestamente a sRGB y la evidencia de contraste acompaña a la paleta.
Geometría actualComplementaria
01 / Geometría de armonía
Elige la relación, no un estado de ánimo al azar.
Cada esquema gira la misma luminosidad y el mismo croma alrededor del eje de tono OKLCH. Así, la regla matemática sigue siendo verificable y el primer color conserva exactamente el valor introducido.
Complementaria
El tono base y su opuesto a 180° forman la separación de dos puntos más intensa.
- 01
#7C3AED
oklch(54.134% 0.24659 293.009) - 02
#717600
oklch(54.134% 0.24659 113.009)Adaptado a sRGB
02 / Registro de contraste
Comprueba la pareja antes de asignarle una función.
Las relaciones con negro y blanco se calculan a partir de cada valor sRGB renderizado. Se indica la opción más fuerte, pero el contexto del componente sigue decidiendo si es utilizable.
ColorTexto negroTexto blancoPareja más fuerte
#7C3AED3,69:15,70:1#FFFFFF
#7176004,29:14,89:1#FFFFFF
Estas relaciones solo se aplican a pares opacos de texto y fondo. El texto, los controles, los bordes, los estados y los indicadores de foco todavía deben comprobarse en la interfaz final.
03 / Entrega a desarrollo
Copia la paleta sin volver a traducirla.
Los nombres estables de las propiedades personalizadas y los valores sRGB de seis dígitos dejan el resultado listo para una hoja de estilos, un archivo de tokens o un prototipo rápido.
:root {
--color-harmony-1: #7C3AED;
--color-harmony-2: #717600;
}04 / Método y límites
Un punto de partida determinista, no una garantía de buen gusto.
Mapeo de gama explícito
Un color OKLCH girado puede quedar fuera de sRGB. Hexees usa su mapeo de gama de CSS Color 4 y marca cada valor adaptado en lugar de recortar los canales en silencio.
El contraste depende de la función
La armonía no implica legibilidad. Usa la tabla como primera comprobación del par de texto y luego verifica el componente, tamaño, estado y límites no textuales reales.
Abrir el comprobador de contraste →