Генератор на цветови хармонии

Как работи генераторът на цветови хармонии

Какво прави инструментът

Генераторът на цветови хармонии изчислява математически свързани цветови набори от един базов нюанс: допълващи, аналогични, триадни, тетрадни, квадратни, разделено-допълващи, монохроматични и нюанси. Всяка палитра се визуализира със стойности HEX, RGB и HSL, които можете да копирате с едно щракване и да използвате директно в CSS или в design tokens.

Често срещани случаи на употреба от разработчици

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

Формати на данни, типове или варианти

Налични са осем схеми: Допълваща (база + 180°), Аналогична (база ± 30°), Триадна (3 цвята на 120° разстояние), Тетрадна (правоъгълна 4-цветна), Квадратна (4 цвята на 90° разстояние), Разделено-допълваща (база + ±150°), Монохроматична (същият нюанс при различна светлота 10–90%) и Нюанси (същият нюанс, от тъмно към светло). Всеки цвят включва своите представяния в HEX, RGB и HSL, заедно с етикет за роля.

Често срещани капани и гранични случаи

Хармониите, получени от силно десатурирани или почти сиви базови цветове, изглеждат неразличими между схемите — започнете от наситена база. Силно наситени базови цветове, комбинирани с триадни или тетрадни схеми, могат да произведат крещящи, трудни за балансиране палитри; помислете за намаляване на наситеността за UI употреба. Някои комбинации, получени от хармонии, не покриват WCAG контраст — винаги проверявайте двойките текст/фон в инструмента Color Contrast, преди да пуснете в продукция.

Кога да използвате този инструмент вместо код

Използвайте инструмента в браузъра за идеи, бързо проучване и преглед на дизайна. В код библиотеки като chroma.js, colord или culori ви позволяват да изчислявате хармонии програмно, да ги интегрирате в build пайплайни за design tokens и да комбинирате математиката на хармониите с перцептуално равномерни цветови пространства като Oklch за по-равномерно изглеждащи палитри.