Warum wirkt OKLCH gleichmäßiger?
Dieses Modell entspricht der menschlichen Farbwahrnehmung besser, daher wirken Palettenschritte meist ruhiger und konsistenter als in HSL.
Läuft vollständig im Browser
Farbpaletten-Generator für Interfaces
Paletten in OKLCH, HSL und HSV erstellen, jeden Ton manuell fein abstimmen, Kontrast prüfen und das Ergebnis nach Tailwind oder als CSS-Variablen exportieren.
5.0 /5 (Оценок: 171)
Базовый цвет
Введите 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;
}So nutzen Sie den Paletten-Generator
Beginnen Sie mit einer Basisfarbe, passen Sie den Verlauf der Skala an und verfeinern Sie nur die Töne, die es wirklich brauchen.
1. Basisfarbe wählen
HEX-Wert eingeben oder Farbfeld nutzen. Der Generator baut sofort eine Skala von 50 bis 950.
2. Modell und Kurven anpassen
OKLCH, HSL und HSV vergleichen, dann Randhelligkeit und Gesamtsättigung der Palette anpassen.
3. Prüfen und exportieren
Palette in der Interface-Vorschau und Kontrastmatrix prüfen, dann nach Tailwind oder CSS exportieren.
Warum einen Paletten-Generator für Interfaces nutzen
Eine gute Palette ist nicht nur Optik. Sie beeinflusst Lesbarkeit, visuelle Hierarchie, Produkterkennung und Entscheidungsgeschwindigkeit in der Oberfläche.
Konsistente Tonlogik
Mit Schritten von 50 bis 950 lassen sich Buttons, Badges, Hintergründe, Zustände und Charts ohne Farbchaos leichter gestalten.
Kontrast und Barrierefreiheit
Kontrastmatrix und automatische Textfarbenwahl helfen, schwache Paare früh zu erkennen und unleserliche Zustände zu vermeiden.
Schnelle Übergabe an den Code
Tailwind- und CSS-Variablen-Export verkürzen den Weg von der Farbwahl bis zur Nutzung in einer echten Oberfläche.
Was in einer guten Produktpalette zählt
Ein Paletten-Generator nützt nicht nur Designer:innen. Er hilft, Systemfarben für Website, SaaS-Interface, Landingpage oder internes B2B-Tool schneller aufzubauen.
Gleichmäßige Helligkeit
Wenn Töne in der Helligkeit springen, wirkt die Oberfläche unruhig: Buttons konkurrieren mit Karten, Akzente verlieren Priorität, Zustände werden unklar.
Daher erlaubt der Generator, die hellen und dunklen Enden der Skala zu steuern und das gleichmäßigere OKLCH-Modell zu nutzen.
Systemdenken statt zufälliger Farbwahl
In einem echten Produkt ist eine Palette selten nur eine schöne Farbe. Es braucht auch Hintergründe, Hover-Zustände, Rahmen, Charts, Tags, Fehlermeldungen, Nebenakzente und lesbaren Text auf verschiedenen Flächen.
- Schritte 50–200 eignen sich für Hintergründe, weiche Badges und helle Zustände.
- Schritte 400–600 werden meist zum Hauptakzent: Buttons, Links, aktive Tabs, Fortschrittsbalken.
- Schritte 700–950 dienen kräftigen Akzenten, dunklen Flächen, Text auf satten Hintergründen und Datenvisualisierung.
Wann die manuelle Bearbeitung jedes Schritts sinnvoll ist
Eine automatische Skala löst die meisten Aufgaben, aber Markensysteme brauchen fast immer etwas manuelle Kontrolle. Z. B. soll 500 für CTAs kräftiger wirken, 100 für helle Karten sauberer, 900 für ein dunkles Panel ruhiger. Daher unterstützt das Tool die Bearbeitung jedes Tons ohne die Gesamtstruktur der Palette zu zerstören.
Häufige Fragen zur Palettenerstellung
Kurze Antworten auf die Fragen, die beim Aufbau einer Palette für Website oder Interface am häufigsten auftauchen.
Muss ich jeden Ton manuell bearbeiten?
Nicht zwingend. Meist reicht es, Modell und Helligkeitsbereich anzupassen und nur wenige Schlüsselschritte manuell zu verfeinern.
Wozu brauche ich eine Kontrastmatrix?
Sie zeigt schnell, welche Tonpaare für Text, Karten, Tags, Charts und Status funktionieren und welche Kombinationen man besser vermeidet.
Wann HSL oder HSV wählen?
Bei bekanntem Web-Modell oder schnellem, lebendigem Prototyp sind HSL und HSV nützlich zum Vergleichen. Für Produktsysteme liefert OKLCH oft bessere Ergebnisse.
Eignet sich der Generator für Tailwind?
Ja. Sie können das Paletten-Objekt direkt in die Projekt-Config übernehmen oder die CSS-Variablen in jedem Frontend nutzen.
Ist das Tool nur für Designer:innen?
Nein. Es nützt auch Entwickler:innen, Marketing und Produktverantwortlichen, die eine saubere Palette für neues Interface oder Landingpage brauchen.
Neues Interface oder Landingpage am Entstehen?
Nutzen Sie den Paletten-Generator als Arbeitsschritt vor Design und Entwicklung: zuerst das Farbsystem aufbauen, dann zum UI-Kit, zur Marketingseite oder zum Produkt. Für andere visuelle Aufgaben steht in derselben Sektion auch der WebP-Optimierer bereit.
Alle Tools dieser Sektion anzeigen