Генератор на светли и темни нијанси

Како да го користите генераторот на светли и темни нијанси

1. Изберете Основна боја со примерокот или внесете вредност во Код на бојата: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) или CSS име како teal.
2. Изберете Чекор: 5 %, 10 %, 20 % или 25 %. Со 10 % добивате светли нијанси на 10 %, 20 % … 100 % и ист број темни нијанси.
3. Изберете како да мешате во Мешање во: OKLCH (перцептивно) или sRGB (класично). Двата реда се освежуваат одеднаш: Светли нијанси (мешани со бела) и Темни нијанси (мешани со црна), секој почнувајќи од основната боја.
4. Кликнете Копирај под кој било примерок за да го копирате неговиот HEX код.
5. Под Извези како изберете CSS променливи, Tailwind конфигурација (v3), Tailwind @theme (v4), SCSS променливи или JSON, подесете Име како primary или brand, па Копирај или Преземи го кодот.

Алатката работи во вашиот прелистувач. Ништо од внесеното не се испраќа на сервер.

Светли нијанси, темни нијанси и тонови

Во теоријата на бои, светла нијанса (tint) е боја измешана со бела, темна нијанса (shade) е боја измешана со црна, а тон е боја измешана со сива. Процентот кажува колку бела или црна е додадена: светла нијанса од 30 % е 70 % основна боја и 30 % бела. На 100 % стигнувате до чиста бела или чиста црна, затоа последниот примерок во секој ред е секогаш #FFFFFF или #000000; го означува крајот на скалата.

Светлите и темните нијанси се најбрзиот начин да изградите конзистентна скала од една боја на бренд: светли позадини и состојби на лебдење од светлите нијанси, рамки, притиснати состојби и темен текст од темните.

OKLCH или sRGB мешање?

sRGB (класично) ги меша вредностите на црвена, зелена и сина директно. Тоа го прават повеќето постари генератори и одговара на CSS color-mix(in srgb, …). Формулата за светла нијанса е едноставно канал + (255 − канал) × p, а за темна канал × (1 − p). Предвидливо е, но чекорите не се перцептивно рамномерни: сините склонуваат кон виолетова како светлеат, а темните нијанси често изгледаат матно.

OKLCH (перцептивно) меша во просторот на бои OKLCH што го дизајнираше Björn Ottosson во 2020 година, како CSS color-mix(in oklch, …). Светлината, хроматичноста и нијансата се интерполираат одделно. Белата и црната немаат нијанса, па основната нијанса се задржува до крај, а секој чекор ја менува светлината за визуелно слична големина. Боите што би паднале надвор од sRGB опсегот се враќаат со намалување на хроматичноста, а не со отсекување на каналите, па нијансата останува стабилна. За дизајн-системи ова обично дава почисти и порамномерни скали.

Користење на извозот

• CSS променливи создаваат блок :root како --primary-tint-20 и --primary-shade-40, подготвен за залепување во стилска датотека.
• Tailwind конфигурација (v3) дава објект colors за theme.extend.colors; потоа пишувате класи како bg-primary-tint-20 или text-primary-shade-60. DEFAULT ја содржи основната боја, па работи и bg-primary.
• Tailwind @theme (v4) дава променливи --color-… за конфигурација прво во CSS на Tailwind 4.
• SCSS променливи и JSON одговараат на други алатки за изградба и дизајн-токени.

Имињата се претвораат во мали букви, а празните места во цртички, па „Brand Blue“ станува brand-blue.