Color Palette Generator

Generujte komplementární, analogické, triádické a tetrádické barevné palety z libovolné základní barvy

Zkusit příklad

Základní barva

Barevné schéma

Vygenerovaná paleta

Co je barevná paleta?

Barevná paleta je pevně daná sada barev zvolených tak, aby v návrhu dobře fungovaly společně. Když pro značku, web nebo ilustraci vyberete jednu základní barvu, potřebujete k ní doprovodné barvy, které se k ní hodí. Generování barevných palet tento výběr automatizuje pomocí pravidel z teorie barev — konkrétně geometrických vztahů na standardním barevném kole HSL.

Barevné kolo HSL (Hue, Saturation, Lightness) rozmísťuje odstíny na 360stupňové kružnici. Červená leží na 0 stupních, zelená na 120 a modrá na 240. Každé schéma barevné harmonie funguje tak, že vybírá odstíny ve specifických úhlových vzdálenostech od základní barvy. Komplementární dvojice například používá dvě barvy vzdálené od sebe přesně 180 stupňů. Analogická sada vybírá barvy do 30 stupňů na každé straně. Tato geometrická pravidla dávají vyvážené kombinace, protože vybrané odstíny jsou rozprostřeny po celém kole, nikoli nakupeny v jedné oblasti.

Tento nástroj přijímá libovolnou barvu v hex formátu, převede ji do HSL, otočí odstín o úhly definované vybraným schématem a výsledky převede zpět do hex. Podporuje šest schémat: komplementární, analogické, triádické, split-komplementární, tetrádické a monochromatické. Každé schéma produkuje různý počet výstupních barev — od 2 do 5.

Proč používat tento generátor barevných palet?

Výběr barev, které spolu fungují, metodou pokus-omyl je pomalý a nespolehlivý. Generátor palet aplikuje pravidla teorie barev okamžitě a poskytuje matematicky vyvážené výsledky z jakéhokoli výchozího bodu.

Okamžité generování palety
Vyberte základní barvu a typ schématu a paleta se zobrazí ihned. Žádné odesílání formulářů, žádné načítání. Změňte základní barvu a výstup se aktualizuje v reálném čase.
🎨
Šest schémat harmonie
Vyberte si z komplementárního, analogického, triádického, split-komplementárního, tetrádického nebo monochromatického schématu. Každé produkuje jiný vizuální efekt — od vysokého kontrastu až po jemné přechody v jednom odstínu.
🔒
Zpracování zaměřené na soukromí
Veškerá barevná matematika probíhá ve vašem prohlížeči. Žádná barevná data se neposílají na žádný server. Nástroj funguje offline, jakmile je stránka načtena.
📋
Export jedním kliknutím
Zkopírujte jednotlivé hex kódy nebo celou paletu jedním kliknutím. Vložte je přímo do CSS, Figma, konfigurace Tailwind nebo libovolného návrhového nástroje, který přijímá hex hodnoty.

Případy použití generátoru barevných palet

Tvorba motivu uživatelského rozhraní
Frontenddevelopeři budující novou aplikaci mohou začít od barvy značky a vygenerovat plnou paletu pro primární, sekundární a akcentové tokeny. Triádická nebo tetrádická schémata poskytují dostatek variety pro tlačítka, odkazy, upozornění a pozadí.
Barevné tokeny designového systému
Inženýři designových systémů používají monochromatické palety k vytvoření škály světlosti pro jeden odstín značky a každý krok mapují na pojmenovaný token (např. blue-100 až blue-900).
Datová vizualizace
Datoví inženýři a analytici potřebují výrazné barvy pro řady grafů, které se nesrážejí. Analogická nebo triádická paleta poskytuje dostatečné odlišení pro 3–6 řad a zároveň udržuje graf vizuálně koherentní.
Marketingové landing pages
Designéři tvořící kampaňové stránky vycházejí z primární barvy značky a pomocí split-komplementárního schématu hledají akcentové barvy pro CTA tlačítka a zvýrazněné sekce bez konfliktu s logem.
Párování pro přístupnost
QA inženýři testující shodu s WCAG párují vygenerované barvy palet a testují je nástrojem pro kontrolu kontrastu. Komplementární nebo split-komplementární schémata často produkují dvojice s vysokým luminančním kontrastem.
Výuka teorie barev
Studenti designu mohou přepínat mezi všemi šesti schématy na téže základní barvě a sledovat, jak každá geometrie rozmísťuje odstíny po barevném kole. Vizuální výstup dělá abstraktní úhly konkrétními.

Srovnání schémat barevné harmonie

Každé schéma harmonie vybírá barvy na základě úhlů otočení odstínu od základní barvy na kole HSL. Níže uvedená tabulka uvádí každé schéma, počet produkovaných barev, úhly otočení a designový kontext, ve kterém funguje nejlépe.

SchémaBarvyÚhly odstínuNejlepší pro
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

Jak funguje otočení barevného kola HSL

Veškeré generování palet v tomto nástroji spoléhá na barevný model HSL. Pochopení jeho tří os vám pomůže předvídat, jak se základní barva transformuje pod jednotlivými schématy.

Odstín (0–360)
Pozice na barevném kole ve stupních. 0 je červená, 60 žlutá, 120 zelená, 180 azurová, 240 modrá, 300 purpurová. Schémata palet otáčejí touto hodnotou při zachování sytosti a světlosti.
Sytost (0–100 %)
Jak živá je barva. 100 % je plně nasycená; 0 % je odstín šedi. Schémata palet zachovávají základní sytost, takže všechny vygenerované barvy sdílejí stejnou intenzitu.
Světlost (0–100 %)
Jak jasná je barva. 0 % je černá, 50 % je čistý odstín, 100 % je bílá. Monochromatická schémata mění světlost pro vytvoření tónové škály; všechna ostatní schémata drží světlost konstantní.

Příklady kódu

Generujte barevné palety programově pomocí konverze HSL a otočení odstínu.

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
}

Často kladené otázky

Jaký je rozdíl mezi komplementárním a split-komplementárním schématem?
Komplementární schéma používá dvě barvy přesně 180 stupňů od sebe na barevném kole, čímž produkuje maximální kontrastní odstíny. Split-komplementární nahrazuje přímý protipól dvěma barvami ve vzdálenosti 150 a 210 stupňů od základní barvy, čímž poskytuje silný kontrast s menším vizuálním napětím. Split-komplementární se v návrhu UI lépe ovládá, protože žádná z akcentových barev přímo neodporuje základní barvě.
Kolik barev by měla mít paleta UI?
Většina designových systémů používá 3–5 základních odstínů: primární, sekundární, neutrální a jeden nebo dva akcenty. Každý základní odstín pak má škálu světlosti (100 až 900). Začněte triádickým nebo tetrádickým schématem pro základní odstíny a poté pro každý vygenerujte monochromatické škály.
Mohu tyto palety použít s Tailwind CSS?
Ano. Zkopírujte hex hodnoty a přidejte je do objektu colors v souboru tailwind.config.js nebo tailwind.config.ts. Pro monochromatickou škálu mapujte každý odstín na číslovaný klíč (50, 100, 200 atd.), aby odpovídal konvenci pojmenování Tailwindu.
Proč některé vygenerované barvy vypadají mdlé nebo kalné?
Pokud má vaše základní barva nízkou sytost nebo extrémní světlost (velmi blízko 0 % nebo 100 %), budou otočené odstíny také ztlumené. Generátor zachovává hodnoty sytosti a světlosti základní barvy. Pro živé palety volte základní barvu se sytostí nad 50 % a světlostí mezi 30 % a 70 %.
Jaký je rozdíl mezi HSL a HSV/HSB?
HSL i HSV používají odstín jako kruhovou osu, ale jas definují odlišně. V HSL je světlost 50 % čistý odstín a 100 % bílá. V HSV (také nazývaném HSB) je hodnota 100 % čistý odstín a bílé nelze dosáhnout bez snížení sytosti. Většina generátorů palet používá HSL, protože jeho osa světlosti intuitivněji odpovídá tomu, jak vnímáme jas barev.
Jak schémata barevné harmonie souvisejí s přístupností?
Barevná harmonie a kontrastní požadavky WCAG jsou oddělené záležitosti. Komplementární dvojice má maximální kontrast odstínů, ale to nezaručuje dostatečný luminanční kontrast pro čitelnost textu. Po vygenerování palety otestujte každou dvojici popředí/pozadí vůči WCAG AA (poměr 4,5:1 pro normální text). Barvy s podobnou světlostí selžou bez ohledu na jejich vztah odstínů.
Je HSL totéž jako funkce CSS hsl()?
Ano. Funkce CSS hsl() přijímá tři argumenty: odstín ve stupních (0–360), sytost jako procento a světlost jako procento. CSS Color Level 4 také přijímá hodnotu alfa oddělenou lomítkem: hsl(240 60% 50% / 0.8). Model HSL používaný tímto generátorem přesně odpovídá specifikaci CSS, takže hodnoty odstínu, sytosti a světlosti lze vložit přímo do stylopisů.