Генератор на цветови палитри

Как да използвате генератора на цветови палитри

1. Изберете Основен цвят с цветовата проба или въведете произволен код в Код на основния цвят (#4F46E5, rgb(79 70 229), hsl(243 75% 59%), CSS име…).
2. Изберете Хармония: Допълваща, Аналогова, Триадна, Разделена допълваща, Тетрадна (правоъгълник), Квадрат или Монохроматична.
3. Изберете Цветен кръг: HSL (класически) или OKLCH (перцептивен). Палитрата се обновява при промяна на всяка опция; Генерирай палитра също я опреснява.
4. Копирайте отделен цвят с бутона Копирай под пробата му или изберете формат в Експортирай като (Списък с HEX, CSS променливи, SCSS променливи, JSON масив или Цветове за Tailwind) и използвайте Копирай или Изтегли за цялата палитра.

Всяка проба показва своя HEX код в черно или бяло, което дава по-добър контраст, и позицията си спрямо основния цвят (например +120°).

Всичко се изчислява във вашия браузър. Нищо от въведеното не се изпраща към сървър.

Цветовите хармонии

Цветовите хармонии са фиксирани ъгли върху цветния кръг. Започвайки от основния ви нюанс, инструментът завърта нюанса и запазва наситеността и светлината на основния цвят.

• Допълваща (0°, 180°): противоположният цвят. Максимален контраст, чудесна за бутон с призив за действие върху основния цвят на марката.
• Аналогова (−60°, −30°, 0°, +30°, +60°): съседни цветове в кръга. Спокойни, естествени комбинации, които вървят добре за фонове и илюстрации.
• Триадна (0°, 120°, 240°): три равномерно разположени нюанса. Живa и балансирана; обикновено един цвят доминира, а другите два са акценти.
• Разделена допълваща (0°, 150°, 210°): двата съседа на допълващия цвят. Силен контраст с по-малко напрежение от чистата допълваща двойка.
• Тетрадна (правоъгълник) (0°, 60°, 180°, 240°): две допълващи двойки. Богати палитри, които се нуждаят от един доминиращ цвят, за да останат цялостни.
• Квадрат (0°, 90°, 180°, 270°): четири равномерно разположени нюанса.
• Монохроматична: един нюанс в пет степени на светлина, от тъмно към светло. Идеална за състояния на интерфейса, диаграми и деликатни дизайни.

HSL или OKLCH кръг?

Кръгът HSL (класически) е традиционният, използван от повечето дизайнерски програми и уроци. Недостатъкът му е, че равните ъгли не изглеждат еднакво ярки: жълтото при 60° изглежда много по-светло от синьото при 240° със същата HSL светлина.

Кръгът OKLCH (перцептивен) завърта нюанса в цветовия модел Oklab, създаден така, че светлината да изглежда последователна. Палитрите, изградени върху него, имат цветове с близко визуално тегло, което помага за достъпен контраст. Някои завъртени цветове може да излязат извън възможностите на екрана; тогава инструментът леко намалява наситеността им, за да останат показваеми.

Използване на експортираната палитра

CSS променливи създават блок :root с --color-1, --color-2…, който можете да поставите в стилов файл. SCSS променливи дават редове $color-1: …;, JSON масив дава списък от HEX низове за скриптове, а Цветове за Tailwind дава обект colors с ключове 100, 200, 300…, който да поставите в конфигурацията на Tailwind.

Преди публикуване проверете контраста на текста: хармонията гарантира приятни нюанси, а не четлив текст. Използвайте тъмни или светли неутрални цветове за основния текст и запазете наситените цветове от палитрата за акценти, бутони и графики.