Visi rīki

Krāsu toņu ģenerators

Izvēlieties bāzes krāsu un uzreiz iegūstiet 10 pakāpju paleti (50–900) ar HSL gaišuma skalēšanu — tāpat kā Tailwind CSS. Kopējiet HEX, RGB vai pilnu CSS mainīgo bloku.

primary-50
rgb(241, 241, 254)
#f1f1feClick copy
primary-100
rgb(222, 223, 252)
#dedffcClick copy
primary-200
rgb(185, 186, 249)
#b9baf9Click copy
primary-300
rgb(133, 136, 244)
#8588f4Click copy
primary-400
rgb(72, 76, 239)
#484cefClick copy
primary-500
rgb(20, 24, 225)
#1418e1Click copy
primary-600
rgb(16, 19, 173)
#1013adClick copy
primary-700
rgb(11, 14, 126)
#0b0e7eClick copy
primary-800
rgb(8, 9, 84)
#080954Click copy
primary-900
rgb(4, 5, 47)
#04052fClick copy
:root {
  --color-primary-50: #f1f1fe;
  --color-primary-100: #dedffc;
  --color-primary-200: #b9baf9;
  --color-primary-300: #8588f4;
  --color-primary-400: #484cef;
  --color-primary-500: #1418e1;
  --color-primary-600: #1013ad;
  --color-primary-700: #0b0e7e;
  --color-primary-800: #080954;
  --color-primary-900: #04052f;
}
Buy me a coffee

Kā tiek ģenerēti toņi

Rīks pārveido bāzes krāsu uz HSL, saglabā nokrāsu un piesātinājumu, pēc tam uzliek fiksētu gaišuma līkni 10 pakāpēs — no 97% gaišuma 50. pakāpē līdz 10% 900. pakāpē.

CSS mainīgie

Katrs tonis tiek kartēts uz CSS mainīgo kā --color-primary-500. Nosauciet prefiksu pēc saviem ieskatiem un ielīmējiet ģenerēto :root bloku savā stila lapā.

Saistītie rīki

Krāsu gradientu paletes ģenerātors

Ģenerē vienmērīgus RGB gradientus starp divām krāsām ar 3–20 soļiem. Kopē HEX, CSS linear-gradient vai Tailwind masīvu.

Krāsu kontrasta analizators

Pārbauda WCAG 2.1 kontrasta attiecības. Nokārtots/neizturēts AA un AAA līmeņiem — plus automātiski ieteikumi un teksta priekšskatījums.

Krāsainas akluma simulators

Augšupielādē attēlu, lai redzētu to ar protanopiju, deuteranopiju, tritanopiju un achromatopsiju.

Tiešsaistes krāsu izvēlne — HEX, RGB & HSL

Izvēlies jebkuru krāsu vizuāli ar HSV izvēlni. Eksportē kā HEX, RGB vai HSL.

Krāsu ritenis tiešsaistē — interaktīvs HSL krāsu izvēlētājs

Interaktīvs HSL krāsu ritenis. Noklikšķini uz jebkura punkta, lai izvēlētos tā nokrāsu un piesātinājumu.

Attēla krāsu izvēlne — krāsas no fotoattēliem

Augšupielādē jebkuru attēlu un noklikšķini, lai paraugotu krāsas tieši no pikseļiem.

HEX uz RGB krāsu pārveidotājs

Pārveido HEX krāsu kodus uz RGB, HSL, HSV un CMYK vērtībām uzreiz.

RGB uz HEX krāsu pārveidotājs

Iestatiet R, G, B vērtības ar slīdņiem vai ievadiem un iegūstiet HEX, HSL izvadi.

Krāsu kontrasta pārbaudītājs — WCAG AA & AAA

Pārbaudi WCAG 2.1 krāsu kontrasta attiecību AA un AAA atbilstībai. Tiešā teksta priekšskatījums.

Krāsu maisītājs & gradienta ģenerātors

Sajauc divas krāsas ar attiecības slīdni. Iegūsti pilnu gradientu paleti.

CSS krāsu nosaukumi — visas 148 krāsas

Pārlūko visas 148 CSS nosauktās krāsas ar to HEX un RGB vērtībām.

Material Design krāsu tabula & palete

Material Design krāsu palete — 19 nokrāsu saimes × 10 toņi katrai.

Minecraft krāsu kodi & formatēšana

Visi Minecraft §-prefiksa krāsu un formatēšanas kodi ar priekšskatījumiem.

Roblox krāsu kodi & BrickColor ID

Pilna Roblox BrickColor palete ar krāsu ID un RGB vērtībām.

Krāsu paletes ģenerātors

Ģenerē harmoniskas krāsu paletes no bāzes krāsas — komplementāras, triādiskas un analogas.

Krāsu formātu konvertētājs

Konvertē krāsas starp HEX, RGB, HSL, HSV, CMYK un CSS nosauktu krāsu formātiem uzreiz.