Paleta de colores

La capa primitiva de color: tonos con nombre, cada uno con una rampa tonal OKLCH (50–900). Cada rol de UI, icono de producto y superficie de marca resuelve a un paso con nombre aquí (p. ej. blue-600) — nunca un hex suelto.

Source spec: specs/themes/palette.kmd · primitives.json

Tonos y rampas

100

200

300

400

500

600

700

800

900

slate

#f4f5f7 AAA

#e8eaed AAA

#d5d8dd AAA

#bcc1c7 AAA

#9fa4ac AAA

#868c93 AA

#6f747b AA

#575b61 AA

#3f4247 AAA

#27292d AAA

blue

#eff6ff AAA

#dcebff AAA

#bfdbff AAA

#96c3ff AAA

#5fa5ff AAA

#398bef AA

#2172d1 AA

#1159aa AA

#054181 AAA

#002856 AAA

indigo

#f3f5ff AAA

#e4e9ff AAA

#ced5ff AAA

#b0bbff AAA

#8d99ff AAA

#7178ff AA

#5a56f5 AA

#4640c9 AAA

#322c99 AAA

#1e1868 AAA

violet

#f5f4ff AAA

#eae6ff AAA

#d9d1ff AAA

#c3b3ff AAA

#a98dff AAA

#9467ff AA

#8040f3 AA

#662cc7 AAA

#4b1b97 AAA

#300a67 AAA

magenta

#fff1f5 AAA

#ffe1e8 AAA

#ffc6d6 AAA

#ff9fbc AAA

#ff669d AAA

#ee3584 AA

#ce136d AA

#a60055 AAA

#7c003e AAA

#510026 AAA

red

#fff2f0 AAA

#ffe2de AAA

#ffc9c2 AAA

#ffa59a AAA

#ff7064 AAA

#f53b36 AA

#d51b1f AA

#ad020f AAA

#810008 AAA

#540003 AAA

orange

#fff2ee AAA

#ffe3d9 AAA

#ffcbb7 AAA

#ffa786 AAA

#ff743b AAA

#e75400 AA

#c14500 AA

#9a3500 AAA

#722500 AAA

#4a1500 AAA

amber

#fff3e7 AAA

#ffe5c8 AAA

#ffce96 AAA

#f8b054 AAA

#e08f00 AAA

#bf7a00 AA

#a06500 AA

#7e4f00 AA

#5d3900 AAA

#3c2300 AAA

green

#e8fcea AAA

#d1f5d6 AAA

#a8ebb4 AAA

#7ad98e AAA

#44c066 AAA

#0fa74b AA

#008b3b AA

#006e2d AA

#00511f AAA

#003311 AAA

teal

#e8faf7 AAA

#d2f2ed AAA

#aae6dd AAA

#7cd3c7 AAA

#49b9ac AAA

#1ca093 AA

#00867b AA

#006a61 AA

#004d47 AAA

#00312c AAA

cyan

#e8f9ff AAA

#d0f0fc AAA

#a8e3f8 AAA

#79ceea AAA

#44b3d4 AAA

#129abc AA

#00809e AA

#00657d AA

#004a5c AAA

#002f3b AAA

Los pasos se generan en OKLCH (perceptualmente uniforme) y se recortan al gamut sRGB. Cada celda muestra su hex y el sello WCAG del texto de mejor contraste.

Uso por banda de paso

Banda	Rol
`50–100`	Rellenos sutiles / tintes — fondos de banner, tinte de fila en hover, variantes *-bg.
`200–300`	Líneas finas / deshabilitado — bordes, divisores, controles deshabilitados, skeletons.
`400–500`	Secundario / hover — acentos secundarios, estados hover, extremo claro del degradado.
`600`	Primario sobre claro — accent, botones primarios, enlaces, relleno dominante de icono. Mínimo: AA en blanco.
`700–800`	Presionado / profundo — estados presionados, extremo profundo del degradado, énfasis sobre fondo tintado.
`900`	Tinta / texto — texto de cuerpo sobre claro, títulos de máximo énfasis, parada más profunda del degradado.

Producto → tono (familia de icono)

Regla de familia de icono: relleno dominante <hue>-600; degradado <hue>-700 → -500 → -400; símbolo blanco en espacio negativo. Tonos distintos, una banda de luminosidad — se leen como hermanos.

Producto	Tono	Dominante	Degradado (profundo → claro)
Koder Drive	`blue`	`blue-600`	`blue-700 → blue-500 → blue-400`
Koder Hub	`green`	`green-600`	`green-700 → green-500 → green-400`
Koder Mail	`red`	`red-600`	`red-700 → red-500 → orange-400`
Koder Cloud	`indigo`	`indigo-600`	`indigo-700 → indigo-500 → violet-400`
Koder Map	`teal`	`teal-600`	`teal-700 → teal-500 → green-400`
Koder Cal	`amber`	`amber-600`	`amber-700 → amber-500 → amber-400`
Koder Kruze	`violet`	`violet-600`	`violet-700 → violet-500 → magenta-400`