Why does OKLCH look more even?
This model matches human color perception better, so palette steps usually feel calmer and more consistent than in HSL.
Runs fully in your browser
Color Palette Generator for Interfaces
Build palettes in OKLCH, HSL and HSV, fine-tune every shade manually, check contrast, and export the result to Tailwind or CSS variables.
4.9 /5 (Оценок: 149)
Базовый цвет
Введите 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;
}How to use the palette generator
Start with a base color, tune the shape of the scale, and manually refine only the shades that really need it.
1. Pick a base color
Enter a HEX value or use the color field. The generator instantly builds a 50–950 scale.
2. Tune the model and curves
Compare OKLCH, HSL and HSV, then adjust edge lightness and the overall saturation of the palette.
3. Review and export
Check the palette in the interface preview and contrast matrix, then export it to Tailwind or CSS.
Why use a palette generator for interfaces
A good palette is not only about looks. It affects readability, visual hierarchy, product recognition, and decision speed inside an interface.
Consistent shade logic
When you have steps from 50 to 950, it becomes much easier to design buttons, badges, backgrounds, states, and charts without color chaos.
Contrast and accessibility
The contrast matrix and automatic text color selection help you spot weak pairs early and avoid unreadable states in the palette.
Fast handoff to code
Tailwind and CSS variable export shortens the gap between choosing colors and shipping them into a real interface.
What matters in a good product palette
A palette generator is useful not only for designers. It helps you build system colors for a website, SaaS interface, landing page, or internal B2B tool much faster.
Even lightness
When shades jump in lightness, the interface feels messy: buttons compete with cards, accents lose priority, and states become unclear.
That is why the generator lets you control the light and dark ends of the scale and use the more even OKLCH model.
System thinking instead of random color picking
In a real product, a palette is rarely just one beautiful color. You also need backgrounds, hover states, borders, charts, tags, error messages, secondary accents, and readable text on different surfaces.
- Steps 50–200 work well for backgrounds, soft badges, and light states.
- Steps 400–600 usually become the main accent: buttons, links, active tabs, and progress bars.
- Steps 700–950 are useful for dense accents, dark surfaces, text on saturated backgrounds, and data visualization.
When manual editing of each step is useful
An automatic scale solves most tasks, but brand systems almost always need some manual control. For example, you may want 500 to feel denser for CTAs, 100 to be cleaner for light cards, and 900 to feel calmer for a dark panel. That is why the tool supports editing each shade without breaking the overall palette structure.
Frequently asked questions about palette generation
Short answers to the questions that come up most often when building a palette for a website or interface.
Do I need to edit every shade manually?
Not necessarily. In most cases it is enough to tune the model and lightness range, then manually refine only a few key steps.
Why do I need a contrast matrix?
It helps you quickly see which shade pairs work for text, cards, tags, charts, and statuses, and which combinations are better avoided.
When should I choose HSL or HSV?
If you need a familiar web model or a quick bright prototype, HSL and HSV are useful for comparison. For product systems, OKLCH often gives better results.
Is the generator suitable for Tailwind?
Yes. You can copy the palette object into your project config right away or use the CSS variables in any frontend setup.
Is this tool only for designers?
No. It is also useful for developers, marketers, and product owners who need a clean palette for a new interface or landing page.
Building a new interface or landing page?
Use the palette generator as a working step before design and development: first build the color system, then move on to the UI kit, marketing page, or product. For other visual tasks, the WebP optimizer is available nearby as well.
View all tools in this section