Color Palette Generator

Генеруйте додаткові, аналогічні, триадні та тетрадні кольорові схеми з будь-якого базового кольору

Спробувати приклад

Базовий колір

Кольорова схема

Згенерована палітра

Що таке кольорова палітра?

Кольорова палітра — це фіксований набір кольорів, підібраних для спільного використання в дизайні. Якщо ви обираєте один базовий колір для бренду, сайту або ілюстрації, вам потрібні супутні кольори, що органічно поєднуються з ним. Генерація кольорової палітри автоматизує цей вибір, застосовуючи правила теорії кольору — зокрема геометричні співвідношення на стандартному колірному колі HSL.

Колірне коло HSL (Hue, Saturation, Lightness) розміщує відтінки по колу 360 градусів. Червоний знаходиться на 0 градусах, зелений — на 120, синій — на 240. Кожна схема колірної гармонії працює шляхом вибору відтінків на певних кутових відстанях від базового кольору. Наприклад, додаткова пара використовує два кольори на відстані 180 градусів один від одного. Аналогічний набір обирає кольори в межах 30 градусів з кожного боку. Ці геометричні правила дають збалансовані поєднання, оскільки обрані відтінки розподіляються по всьому колу, а не концентруються в одній ділянці.

Цей інструмент приймає будь-який hex-колір як вхідні дані, перетворює його на HSL, повертає відтінок на кути, визначені обраною схемою, і конвертує результати назад у hex. Підтримується шість схем: додаткова, аналогічна, триадна, спліт-додаткова, тетрадна та монохроматична. Кожна схема генерує різну кількість вихідних кольорів — від 2 до 5.

Чому варто використовувати цей Color Palette Generator?

Підбирати кольори, що добре поєднуються, методом спроб і помилок — повільно і ненадійно. Генератор палітр миттєво застосовує правила теорії кольору й видає математично збалансований результат з будь-якої відправної точки.

Миттєва генерація палітри
Оберіть базовий колір і тип схеми — палітра з'явиться одразу. Без надсилання форм, без екранів завантаження. Змініть базовий колір — і результат оновиться в реальному часі.
🎨
Шість схем гармонії
Виберіть з-поміж додаткової, аналогічної, триадної, спліт-додаткової, тетрадної або монохроматичної схеми. Кожна дає різний візуальний ефект — від контрастних пар до тонких градієнтів одного відтінку.
🔒
Обробка без передачі даних
Всі обчислення кольорів виконуються у вашому браузері. Жодні дані не надсилаються на сервер. Інструмент працює офлайн після завантаження сторінки.
📋
Експорт одним кліком
Скопіюйте окремі hex-коди або всю палітру одним кліком. Вставляйте безпосередньо в CSS, Figma, конфігурацію Tailwind або будь-який дизайн-інструмент, що підтримує hex-значення.

Випадки використання Color Palette Generator

Створення теми UI
Фронтенд-розробники, що будують новий застосунок, можуть взяти колір бренду й згенерувати повну палітру для токенів primary, secondary та accent. Триадні або тетрадні схеми дають достатньо різноманіття для кнопок, посилань, сповіщень та фонів.
Кольорові токени дизайн-системи
Інженери дизайн-систем використовують монохроматичні палітри для генерації шкали світлості для одного фірмового відтінку, а потім присвоюють кожному кроку іменований токен (наприклад, blue-100 до blue-900).
Візуалізація даних
Аналітики та інженери даних потребують чітко розрізнених кольорів для серій діаграм, що не конфліктують між собою. Аналогічна або триадна палітра забезпечує достатнє розділення для 3–6 серій і водночас зберігає візуальну цілісність графіка.
Маркетингові лендінги
Дизайнери, що створюють сторінки кампаній, відштовхуються від основного кольору бренду та застосовують спліт-додаткову схему для пошуку акцентних кольорів для кнопок CTA й виділених секцій — без конфлікту з логотипом.
Підбір кольорів для доступності
QA-інженери, що тестують відповідність WCAG, поєднують згенеровані кольори палітри та перевіряють їх через перевірник контрастності. Початок з додаткової або спліт-додаткової схеми нерідко дає пари з високим контрастом яскравості.
Вивчення теорії кольору
Студенти, що вивчають дизайн, можуть перемикатися між усіма шістьма схемами на одному базовому кольорі й бачити, як кожна геометрія розподіляє відтінки по колу. Візуальний результат робить абстрактні кути відчутними.

Порівняння схем колірної гармонії

Кожна схема гармонії обирає кольори на основі кутів повороту відтінку від базового кольору на колі HSL. У таблиці нижче наведені кожна схема, кількість кольорів, які вона генерує, кути повороту та дизайн-контексти, де вона найкраще працює.

СхемаКольориКути відтінкуНайкраще для
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

Як працює поворот відтінку на колі HSL

Вся генерація палітр у цьому інструменті ґрунтується на колірній моделі HSL. Розуміння її трьох осей допомагає передбачити, як базовий колір трансформується в кожній схемі.

Hue (0–360)
Позиція на колірному колі в градусах. 0 — червоний, 60 — жовтий, 120 — зелений, 180 — блакитний, 240 — синій, 300 — пурпурний. Схеми палітр обертають це значення, зберігаючи насиченість і світлість незмінними.
Saturation (0–100%)
Наскільки яскравий колір. 100% — повністю насичений, 0% — відтінок сірого. Схеми палітр зберігають базову насиченість, тому всі згенеровані кольори мають однакову інтенсивність.
Lightness (0–100%)
Наскільки яскравий колір. 0% — чорний, 50% — чистий відтінок, 100% — білий. Монохроматичні схеми варіюють світлість для створення тонального діапазону; всі інші схеми тримають світлість сталою.

Приклади коду

Програмна генерація кольорових палітр за допомогою перетворення HSL та повороту відтінку.

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

Часті запитання

У чому різниця між додатковою та спліт-додатковою схемами?
Додаткова схема використовує два кольори рівно на 180 градусів один від одного на колірному колі, що дає максимальний контраст відтінків. Спліт-додаткова замінює прямий протилежний колір двома кольорами на 150 і 210 градусів від базового — це дає сильний контраст з меншим візуальним напруженням. Спліт-додаткова схема зручніша в UI-дизайні, оскільки жоден акцентний колір не протистоїть базовому безпосередньо.
Скільки кольорів повинна мати UI-палітра?
Більшість дизайн-систем використовують 3–5 основних відтінків: primary, secondary, neutral та один-два акцентних. Для кожного основного відтінку потім будується шкала світлості (від 100 до 900). Почніть з триадної або тетрадної схеми для основних відтінків, а потім згенеруйте монохроматичні шкали для кожного.
Чи можна використовувати ці палітри з Tailwind CSS?
Так. Скопіюйте hex-значення й додайте їх до об'єкта colors у файлі tailwind.config.js або tailwind.config.ts. Для монохроматичної шкали присвойте кожному відтінку пронумерований ключ (50, 100, 200 тощо) відповідно до угоди іменування Tailwind.
Чому деякі згенеровані кольори виглядають тьмяними або брудними?
Якщо базовий колір має низьку насиченість або екстремальну світлість (дуже близько до 0% або 100%), повернуті відтінки також виглядатимуть приглушено. Генератор зберігає значення насиченості й світлості базового кольору. Для яскравих палітр обирайте базовий колір із насиченістю понад 50% і світлістю від 30% до 70%.
У чому різниця між HSL та HSV/HSB?
HSL та HSV обидві використовують відтінок як кругову вісь, але по-різному визначають яскравість. В HSL світлість 50% відповідає чистому відтінку, а 100% — білому. В HSV (також відомий як HSB) значення 100% відповідає чистому відтінку, і досягти білого без зниження насиченості неможливо. Більшість генераторів палітр використовують HSL, оскільки його вісь світлості більш інтуїтивно відповідає нашому сприйняттю яскравості кольору.
Як схеми колірної гармонії пов'язані з доступністю?
Колірна гармонія і контраст WCAG — це окремі поняття. Додаткова пара має максимальний контраст відтінків, але це не гарантує достатнього контрасту яскравості для читабельності тексту. Після генерації палітри перевіряйте кожну пару «передній план / фон» відповідно до WCAG AA (коефіцієнт 4,5:1 для звичайного тексту). Кольори зі схожою світлістю не пройдуть перевірку незалежно від їхнього відтінкового співвідношення.
Чи збігається HSL із функцією hsl() у CSS?
Так. Функція hsl() у CSS приймає три аргументи: відтінок у градусах (0–360), насиченість у відсотках і світлість у відсотках. CSS Color Level 4 також приймає значення альфа-каналу через скісну риску: hsl(240 60% 50% / 0.8). Модель HSL, що використовується в цьому генераторі, точно відповідає специфікації CSS, тому ви можете вставляти значення відтінку, насиченості та світлості безпосередньо у ваші таблиці стилів.