Генератор на палета на бои

Како да го користите генераторот на палета на бои

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°): три еднакво распоредени нијанси. Живописна и избалансирана; обично една боја доминира, а другите две се акценти.
• Поделена комплементарна (0°, 150°, 210°): двата соседа на комплементот. Силен контраст со помалку напнатост од чистиот комплементарен пар.
• Тетрадна (правоаголник) (0°, 60°, 180°, 240°): два комплементарни пара. Богати палети кои бараат една доминантна боја за да останат складни.
• Квадрат (0°, 90°, 180°, 270°): четири еднакво распоредени нијанси.
• Монохроматска: една нијанса во пет чекори на светлина, од темна до светла. Идеална за состојби на UI, графикони и суптилни дизајни.

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.

Пред да објавите, проверете го контрастот на текстот: хармонијата гарантира пријатни нијанси, не читлив текст. Користете темни или светли неутрални бои за основниот текст, а заситените бои од палетата чувајте за акценти, копчиња и графики.