Paleta para modo oscuro
Dark Mode Palette
Construye una rampa de 50 a 950 desde un color y la refleja en una versión oscura, de modo que cada pareja de tokens conserva su contraste.
Deriva una escala oscura de una clara reflejándola: el paso 50 se convierte en 950, el 100 en 900, y así sucesivamente. Es la única derivación que conserva el *contrato* de los nombres de los tokens, así que un par que pasaba WCAG en modo claro pasa con la misma relación en modo oscuro y un componente escrito contra la escala no necesita ningún cambio. Es la misma página que la escala de tonos y sombras, abierta en la pestaña oscura.
Color base
Su matiz y su croma siembran la rampa; su luminosidad decide qué paso queda marcado como el que elegiste.
Rampa
Los objetivos de luminosidad son la media de las propias familias cromáticas de Tailwind, medidas del paquete instalado en vez de elegidas aquí.
Modo oscuro
El paso 50 pasa a ser el 950, el 100 el 900, y así. Los nombres de los tokens conservan su significado — el 500 sigue siendo el tono medio — y un componente escrito contra la escala no necesita cambio alguno.
Claro
50
P3
100
P3
200
P3
300
P3
400
P3
500
P3
600
700
800
900
950
Oscuro
50
100
200
300
400
500
600
700
800
900
950
Por qué reflejar: el contraste de una pareja de tokens se conserva
- 50 sobre 900: claro 8,93 · oscuro 12,73
- 100 sobre 800: claro 6,68 · oscuro 7,19
- 200 sobre 950: claro 11,16 · oscuro 7,19
Los nombres de los tokens conservan su significado, así que un componente escrito contra la escala no necesita cambio alguno.
Exportar
¿Buscas un juego de matices en vez de la rampa de uno solo? El generador de paletas construye armonías. Para encontrar el token de Tailwind más cercano a cualquiera de estos, la búsqueda del color más cercano lo mide en ΔE.
Cómo se usa
Introduce el color base
Un color. La rampa clara se construye primero y la oscura se deriva de ella, así que las dos salen de la misma semilla en lugar de mantenerse por separado.
Elige la estrategia
Reflejar es la opción por defecto y la que tiene el argumento del contraste detrás. Desplazar a oscuro mueve cada paso tres posiciones hacia abajo en su lugar, lo que conserva el orden para que un degradado de claro a oscuro no se invierta, a costa de los pasos más oscuros. Reflejar y apagar es reflejar con el croma bajado más aún.
Amortigua el croma para rellenos grandes
El color saturado sobre una superficie oscura brilla y vibra, y el efecto empeora cuanto mayor es el área. Bajar el croma es la opción conservadora; déjalo cerca del 100 % si la escala solo se usa para acentos pequeños y texto.
Lee el panel de prueba
Con el reflejo activado, imprime la relación WCAG de tres pares de tokens en los dos modos, lado a lado. Es la afirmación comprobada delante de ti en lugar de afirmada.
Exporta las dos escalas a la vez
Las formas CSS emiten la escala clara en `:root` y la oscura dentro de un bloque `prefers-color-scheme: dark`, así que el tema entero es un solo pegado.
Preguntas frecuentes
¿Puedo pegar la paleta clara que ya tengo?
No como conjunto. Esta página toma un color y construye las dos rampas a partir de él, así que una paleta existente con pasos afinados a mano no sobrevivirá a que se le meta un color cada vez: obtendrías once pasos regulares, no tus once. Cuando la paleta existente importa más que la regularidad, conviértela token a token y comprueba cada par en el comprobador de contraste.
¿Reflejar conserva el contraste exactamente?
Aproximadamente, no exactamente. La rampa es simétrica en luminosidad OKLCH, y el contraste WCAG se calcula sobre la luminancia relativa, que no es una función lineal de ella, así que las relaciones salen cercanas entre sí en lugar de idénticas. El panel de prueba imprime los dos números para que veas la brecha para tu color en lugar de fiarte de la afirmación.
¿Debería usar negro puro como fondo oscuro?
Normalmente no. El negro puro contra texto claro maximiza el contraste, y en un LCD el halo que eso produce hace que la letra pequeña sea más difícil de leer, no más fácil. La tira oscura de aquí se previsualiza sobre un gris muy oscuro por esa razón. Un teléfono OLED es el único caso en que el negro real compra algo real, en energía.
¿Por qué es una página aparte de la escala de tonos y sombras?
No lo es: es la misma herramienta con la pestaña oscura ya activada, porque «hazme una paleta oscura» y «hazme una rampa 50-950» llegan como preguntas distintas de personas distintas. Todo lo que hay en una página está en la otra.
Puede recibir de
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Escala de tonos y sombras
Tint & Shade Scale
Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.
Extractor de tokens de CSS
CSS Token Extractor
Saca los colores, espaciados, radios y tipografías de una hoja de estilos y propone un conjunto de propiedades personalizadas.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Escala de tonos y sombras
Tint & Shade Scale
Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Extractor de tokens de CSS
CSS Token Extractor
Saca los colores, espaciados, radios y tipografías de una hoja de estilos y propone un conjunto de propiedades personalizadas.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.