Генератор на цветови палитри
Цветова хармония
Two colors opposite on the color wheel
Генерирана палитра
Преглед на палитрата
Експортиране на палитра
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}Технически подробности
Как работи генераторът на цветови палитри
Какво прави инструментът
Генераторът на цветови палитри създава хармонични цветови схеми от всеки базов цвят, използвайки утвърдени принципи на теорията на цветовете. Изберете базов цвят и изберете от шест типа хармония — комплементарна, аналогова, триадна, тетрадна, разделено-комплементарна или монохроматична — за да генерирате мигновено координирана палитра. Всеки генериран цвят показва стойности HEX, RGB и HSL, готови за копиране във вашия CSS, инструмент за дизайн или стилов гид.
Често срещани случаи на употреба от разработчици
Дизайнери и разработчици използват генератори на палитри при стартиране на нови проекти, създаване на дизайн системи или обновяване на бранд цветовете. Чести сценарии включват генериране на комплементарни акцентни цветове за основен бранд цвят, създаване на аналогови цветови схеми за визуализации на данни, изграждане на триадни палитри за живи UI теми и изследване на монохроматични вариации за минималистични дизайни. Инструментът е полезен и за генериране на набори от CSS custom properties и JSON цветови токени за дизайн системи.
Типове цветова хармония
Цветовите хармонии се базират на цветното колело. Комплементарните цветове са разположени един срещу друг (180°) и създават висок контраст. Аналоговите цветове са съседни (±30°) и изглеждат съгласувано. Триадните цветове са равномерно разположени през 120° за балансирана наситеност. Тетрадната (правоъгълник) използва четири цвята през 90°. Разделено-комплементарната съчетава базов цвят с два цвята, съседни на неговия комплемент. Монохроматичната варира светлината и наситеността на един-единствен нюанс за фини, единни палитри.
Често срещани капани и гранични случаи
Генерираните палитри са отправни точки, а не финални дизайни. Винаги проверявайте съотношенията на контраст между генерираните цветове, за да осигурите достъпност. Много наситени или много тъмни базови цветове могат да доведат до палитри с лоша четимост. Имайте предвид, че цветовете на екрана изглеждат различно при печат. Тествайте палитрите с реално съдържание и UI елементи, вместо да разчитате само на предварителни прегледи на мостри.
Кога да използвате този инструмент вместо код
Използвайте този браузърен инструмент за интерактивно изследване и бързо генериране на палитри по време на дизайн спринтове. За производствени дизайн системи внедрете генерирането на палитри програмно, използвайки библиотеки като chroma.js, culori или polished, които могат да генерират хармонии, да налагат съотношения на контраст и да се интегрират с build pipelines.