¿Por qué OKLCH se ve más uniforme?
Este modelo se acerca más a la percepción humana del color, por lo que los pasos de la paleta suelen sentirse más calmados y coherentes que en HSL.
Funciona totalmente en tu navegador
Generador de paletas de color para interfaces
Crea paletas en OKLCH, HSL y HSV, ajusta cada tono manualmente, comprueba el contraste y exporta el resultado a Tailwind o variables CSS.
4.7 /5 (Оценок: 100)
Базовый цвет
Введите HEX или выберите базовый цвет. Генератор построит шкалу 50–950 и сразу покажет её в интерфейсе.
L
C
H
Цветовая модель
OKLCH даёт более ровную визуальную шкалу и подходит для продуктовых интерфейсов.
Параметры генерации
Диапазон светлоты98% → 10%
Множитель насыщенности1.00×
Количество оттенков11
от 3 до 11
Предпросмотр палитры
Переключайте вкладки и смотрите, как оттенки ведут себя в реальных интерфейсных сценариях.
OKLCH • 11 оттенков
Шаблоны:
50
#eef9ff
L 98 / C 0.066
Тёмный текст
100
#e2f1ff
L 96 / C 0.120
Тёмный текст
200
#c0dbff
L 89 / C 0.161
Тёмный текст
300
#8fbaff
L 79 / C 0.191
Тёмный текст
400
#518eff
L 67 / C 0.209
Тёмный текст
500
#2361e9
L 54 / C 0.215
Белый текст
600
#0036b9
L 41 / C 0.209
Белый текст
700
#000b88
L 29 / C 0.191
Белый текст
800
#000058
L 19 / C 0.161
Белый текст
900
#000030
L 12 / C 0.120
Белый текст
950
#000019
L 10 / C 0.066
Белый текст
Вертикальная лента
Как палитра выглядит в плотном UI
50#eef9ff
100#e2f1ff
200#c0dbff
300#8fbaff
400#518eff
500#2361e9
600#0036b9
700#000b88
800#000058
900#000030
950#000019
Экспорт для Tailwind
Скопируйте объект палитры и вставьте его в tailwind.config.js.
theme: {
extend: {
colors: {
brand: {
50: '#eef9ff',
100: '#e2f1ff',
200: '#c0dbff',
300: '#8fbaff',
400: '#518eff',
500: '#2361e9',
600: '#0036b9',
700: '#000b88',
800: '#000058',
900: '#000030',
950: '#000019',
},
},
},
}CSS-переменные
Скопируйте токены для :root или любого контейнера темы.
:root {
--color-50: #eef9ff;
--color-100: #e2f1ff;
--color-200: #c0dbff;
--color-300: #8fbaff;
--color-400: #518eff;
--color-500: #2361e9;
--color-600: #0036b9;
--color-700: #000b88;
--color-800: #000058;
--color-900: #000030;
--color-950: #000019;
}Cómo usar el generador de paletas
Empieza con un color base, ajusta el perfil de la escala y refina manualmente solo los tonos que realmente lo necesiten.
1. Elige un color base
Introduce un valor HEX o usa el campo de color. El generador construye al instante una escala del 50 al 950.
2. Ajusta el modelo y las curvas
Compara OKLCH, HSL y HSV, luego ajusta la luminosidad de los extremos y la saturación general de la paleta.
3. Revisa y exporta
Comprueba la paleta en la vista previa de la interfaz y en la matriz de contraste, luego exporta a Tailwind o CSS.
Por qué usar un generador de paletas para interfaces
Una buena paleta no es solo estética. Afecta a la legibilidad, la jerarquía visual, el reconocimiento del producto y la velocidad de decisión en la interfaz.
Lógica consistente de tonos
Con pasos del 50 al 950, es mucho más fácil diseñar botones, badges, fondos, estados y gráficos sin caos de colores.
Contraste y accesibilidad
La matriz de contraste y la selección automática del color del texto ayudan a detectar pares débiles pronto y a evitar estados ilegibles en la paleta.
Traspaso rápido al código
La exportación a Tailwind y variables CSS acorta el camino entre elegir colores y llevarlos a una interfaz real.
Qué importa en una buena paleta de producto
El generador de paletas es útil no solo para diseñadores. Ayuda a montar colores de sistema para web, interfaz SaaS, landing o herramienta B2B interna más rápido.
Luminosidad uniforme
Cuando los tonos saltan en luminosidad, la interfaz se siente desordenada: los botones compiten con las tarjetas, los acentos pierden prioridad y los estados se vuelven poco claros.
Por eso el generador permite controlar los extremos claro y oscuro de la escala y usar el modelo OKLCH más uniforme.
Pensamiento de sistema en lugar de elegir colores al azar
En un producto real, una paleta rara vez es solo un color bonito. También hacen falta fondos, estados hover, bordes, gráficos, etiquetas, mensajes de error, acentos secundarios y texto legible en distintas superficies.
- Los pasos 50–200 funcionan bien para fondos, badges suaves y estados claros.
- Los pasos 400–600 suelen ser el acento principal: botones, enlaces, pestañas activas y barras de progreso.
- Los pasos 700–950 sirven para acentos densos, superficies oscuras, texto sobre fondos saturados y visualización de datos.
Cuándo es útil la edición manual de cada paso
Una escala automática resuelve la mayoría de tareas, pero los sistemas de marca casi siempre necesitan cierto control manual. Por ejemplo, puede que quieras que el 500 sea más denso para CTAs, el 100 más limpio para tarjetas claras y el 900 más calmado para un panel oscuro. Por eso la herramienta permite editar cada tono sin romper la estructura general de la paleta.
Preguntas frecuentes sobre la generación de paletas
Respuestas breves a las preguntas que más surgen al crear una paleta para web o interfaz.
¿Tengo que editar cada tono manualmente?
No necesariamente. En la mayoría de casos basta con ajustar el modelo y el rango de luminosidad y refinar a mano solo unos pasos clave.
¿Para qué sirve la matriz de contraste?
Ayuda a ver rápido qué pares de tonos funcionan para texto, tarjetas, etiquetas, gráficos y estados, y qué combinaciones es mejor evitar.
¿Cuándo elegir HSL o HSV?
Si necesitas un modelo web familiar o un prototipo rápido y vivo, HSL y HSV son útiles para comparar. Para sistemas de producto, OKLCH suele dar mejores resultados.
¿El generador es adecuado para Tailwind?
Sí. Puedes copiar el objeto de la paleta a la config del proyecto al instante o usar las variables CSS en cualquier frontend.
¿Esta herramienta es solo para diseñadores?
No. También es útil para desarrolladores, marketers y responsables de producto que necesitan una paleta limpia para una nueva interfaz o landing.
¿Montando una nueva interfaz o landing?
Usa el generador de paletas como paso de trabajo antes del diseño y el desarrollo: primero monta el sistema de color, luego pasa al kit de UI, página de marketing o producto. Para otras tareas visuales, el optimizador WebP también está disponible en esta sección.
Ver todas las herramientas de esta sección