handl_ /lab/paleta
← Všechny nástroje

Paleta pro světlý i tmavý režim

Zadejte jednu barvu značky. Vygenerujeme z ní odstíny 50 až 950 a ukážeme, které z nich jsou čitelné na světlém i tmavém pozadí.

Ve světlém režimu použijte pro tlačítka s bílým textem odstín 700 nebo tmavší. V tmavém režimu přepněte na odstín 500 s tmavým textem.

50
bílá 1,1 tmavá 16,7 ✓
100
bílá 1,2 tmavá 15,2 ✓
200
bílá 1,4 tmavá 12,6 ✓
300
bílá 1,8 tmavá 9,9 ✓
400
bílá 2,4 tmavá 7,5 ✓
500
bílá 3,0 tmavá 6,0 ✓
600
bílá 4,1 tmavá 4,4
700
bílá 5,7 ✓ tmavá 3,1
800
bílá 8,7 ✓ tmavá 2,1
900
bílá 13,0 ✓ tmavá 1,4
950
bílá 17,9 ✓ tmavá 1,0

Světlý režim

Novinka Nová verze aplikace je venku Podívejte se, co je nového, a vyzkoušejte ji 14 dní zdarma.
Vyzkoušet zdarma Co je nového
  • Text na kartě 950 / 50 ✓ 16,7 : 1
  • Vedlejší text 800 / 50 ✓ 8,1 : 1
  • Bílý text na tlačítku bílá / 700 ✓ 5,7 : 1
  • Obrys tlačítka 700 / 50 ✓ 5,3 : 1

Tmavý režim

Novinka Nová verze aplikace je venku Podívejte se, co je nového, a vyzkoušejte ji 14 dní zdarma.
Vyzkoušet zdarma Co je nového
  • Text na kartě 50 / 900 ✓ 12,1 : 1
  • Vedlejší text 200 / 900 ✓ 9,1 : 1
  • Tmavý text na tlačítku 950 / 500 ✓ 6,0 : 1
  • Obrys tlačítka 500 / 900 ✓ 4,4 : 1
Export do CSS (světlý i tmavý režim) 
:root {
  --c-50: #fff5f0;
  --c-100: #ffe8db;
  --c-200: #ffceb3;
  --c-300: #ffae80;
  --c-400: #ff8742;
  --c-500: #ff630a;
  --c-600: #db5000;
  --c-700: #b34100;
  --c-800: #853000;
  --c-900: #572000;
  --c-950: #1f150f;

  --bg: #ffffff;
  --surface: var(--c-50);
  --text: var(--c-950);
  --text-muted: var(--c-800);
  --accent: var(--c-700);
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--c-950);
    --surface: var(--c-900);
    --text: var(--c-50);
    --text-muted: var(--c-200);
    --accent: var(--c-500);
    --on-accent: var(--c-950);
  }
}

Proč nestačí barvu jen obrátit

Odstín, který na bílé funguje jako tlačítko, bývá na tmavém pozadí příliš tmavý. V tmavém režimu se proto používají světlejší odstíny stejné barvy.

Místo čisté černé tónované pozadí

Tmavý režim s pozadím jemně tónovaným do barvy značky (odstín 950) působí měkčeji a méně unavuje oči než #000.

Jak číst čísla u odstínů

Kontrast odstínu proti bílému a tmavému (950) pozadí, ✓ znamená, že projde pro běžný text. Pro běžný text je potřeba aspoň 4,5 : 1, pro velký text a ikony 3 : 1.