Pourquoi OKLCH paraît-il plus régulier ?
Ce modèle correspond mieux à la perception humaine des couleurs, donc les pas de la palette sont en général plus calmes et cohérents qu'en HSL.
Fonctionne entièrement dans votre navigateur
Générateur de palettes de couleurs pour interfaces
Créez des palettes en OKLCH, HSL et HSV, affinez chaque teinte manuellement, vérifiez le contraste et exportez le résultat en Tailwind ou variables CSS.
4.7 /5 (Оценок: 140)
Базовый цвет
Введите 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;
}Comment utiliser le générateur de palettes
Partez d'une couleur de base, réglez le profil de l'échelle et affinez manuellement uniquement les teintes qui le nécessitent vraiment.
1. Choisir une couleur de base
Saisissez une valeur HEX ou utilisez le champ couleur. Le générateur construit instantanément une échelle de 50 à 950.
2. Ajuster le modèle et les courbes
Comparez OKLCH, HSL et HSV, puis ajustez la luminosité des extrêmes et la saturation globale de la palette.
3. Vérifier et exporter
Vérifiez la palette dans l'aperçu interface et la matrice de contraste, puis exportez vers Tailwind ou CSS.
Pourquoi utiliser un générateur de palettes pour les interfaces
Une bonne palette ne sert pas qu'au rendu. Elle influe sur la lisibilité, la hiérarchie visuelle, la reconnaissance du produit et la rapidité de décision dans l'interface.
Logique cohérente des teintes
Avec des pas de 50 à 950, il est bien plus simple de concevoir boutons, badges, fonds, états et graphiques sans chaos de couleurs.
Contraste et accessibilité
La matrice de contraste et le choix automatique de la couleur du texte aident à repérer tôt les paires faibles et à éviter les états illisibles dans la palette.
Passage rapide au code
L'export Tailwind et variables CSS réduit l'écart entre le choix des couleurs et leur mise en œuvre dans une interface réelle.
Ce qui compte dans une bonne palette produit
Le générateur de palettes est utile pas seulement aux designers. Il aide à construire plus vite les couleurs système d'un site, d'une interface SaaS, d'une landing ou d'un outil B2B interne.
Luminosité régulière
Quand les teintes sautent en luminosité, l'interface paraît désordonnée : boutons en concurrence avec les cartes, accents qui perdent la priorité, états peu clairs.
C'est pourquoi le générateur permet de contrôler les extrémités claire et sombre de l'échelle et d'utiliser le modèle OKLCH plus régulier.
Penser en système plutôt qu'en choix de couleurs au hasard
Dans un vrai produit, une palette est rarement une seule belle couleur. Il faut aussi des fonds, des états au survol, des bordures, des graphiques, des tags, des messages d'erreur, des accents secondaires et du texte lisible sur différentes surfaces.
- Les pas 50–200 conviennent aux fonds, badges doux et états clairs.
- Les pas 400–600 deviennent en général l'accent principal : boutons, liens, onglets actifs, barres de progression.
- Les pas 700–950 servent aux accents marqués, surfaces sombres, texte sur fonds saturés et visualisation de données.
Quand l'édition manuelle de chaque pas est utile
Une échelle automatique règle la plupart des cas, mais les systèmes de marque ont presque toujours besoin d'un peu de réglage manuel. Par exemple, vous pouvez vouloir que le 500 soit plus dense pour les CTA, le 100 plus propre pour les cartes claires et le 900 plus calme pour un panneau sombre. C'est pourquoi l'outil permet d'éditer chaque teinte sans casser la structure globale de la palette.
Questions fréquentes sur la génération de palettes
Réponses courtes aux questions qui reviennent le plus en créant une palette pour un site ou une interface.
Faut-il éditer chaque teinte à la main ?
Pas forcément. Souvent il suffit d'ajuster le modèle et la plage de luminosité, puis d'affiner à la main seulement quelques pas clés.
À quoi sert la matrice de contraste ?
Elle permet de voir rapidement quelles paires de teintes conviennent pour le texte, les cartes, tags, graphiques et états, et quelles combinaisons vaut mieux éviter.
Quand choisir HSL ou HSV ?
Pour un modèle web familier ou un prototype vif rapide, HSL et HSV sont utiles pour comparer. Pour les systèmes produit, OKLCH donne souvent de meilleurs résultats.
Le générateur convient-il à Tailwind ?
Oui. Vous pouvez copier l'objet palette dans la config du projet tout de suite ou utiliser les variables CSS dans n'importe quel frontend.
Cet outil est-il réservé aux designers ?
Non. Il est aussi utile aux développeurs, marketeurs et product owners qui ont besoin d'une palette propre pour une nouvelle interface ou landing.
Vous montez une nouvelle interface ou landing ?
Utilisez le générateur de palettes comme étape de travail avant le design et le dev : d'abord construisez le système de couleurs, puis passez au kit UI, à la page marketing ou au produit. Pour d'autres tâches visuelles, l'optimiseur WebP est aussi disponible dans cette section.
Voir tous les outils de cette section