Hoppa í aðalefni
Vefapp · LitirLitavinnustofa · 2026

Búðu til litapallettu, sjáðu hana lifna við í Tailwind.

Inngangur

Veldu grunnlit: límdu inn hex-gildi, dragðu í litavalið eða veldu úr Tailwind-töflunni. Við búum til fullan 50–950 Tailwind-skala, litasamsetningar úr litafræðinni og næsta Tailwind-lit, með tilbúnum @theme- og config-kóða sem þú afritar beint inn í verkefnið. Allt gerist í vafranum, ekkert vistast.

Grunnlitur

Hex-gildi, litavalið eða slembilitur. Allt reiknast út frá þessum lit.

Grunnursky-600

#2B7DBA

oklch 0.57 0.122 245° · Δ0.026 frá sky-600

Hex-gildi
#

Litapalletta

Stokkaðu fimm-lita sett og smelltu á einn til að hlaða honum sem grunn. Skalinn að neðan endurbyggir út frá honum.

Vefapp. litapalletta

Fyrsti reiturinn er grunnliturinn. Hinir fylgja honum. Smelltu á lit til að gera hann að grunni · lásinn heldur reit þegar þú stokkar.

Nota þessa liti í tilboði

Tailwind-skali

Fullur 50–950 skali búinn til úr grunnlitnum. Smelltu á tón til að afrita hex-gildið.

Forskoðun · @theme

@theme {
  --color-brand-50: #ecf7ff;
  --color-brand-100: #daecfd;
  --color-brand-200: #beddf9;
  --color-brand-300: #97c6ee;
  --color-brand-400: #65a6dc;
  --color-brand-500: #4292d0;
  --color-brand-600: #2b7dba;
  --color-brand-700: #1b6aa1;
  --color-brand-800: #195886;
  --color-brand-900: #184a70;
  --color-brand-950: #022641;
}

Litasamsetningar

Klassískar samsetningar úr litafræðinni, reiknaðar í OKLCH. Smelltu til að afrita.

Andstæða

2

Skyldir tónar

3

Þrístæða

3

Fjórstæða

4

Klofin andstæða

3

Einlitur

5

Tailwind-litatafla

Allir sjálfgefnu Tailwind-litirnir. Næsti litur við grunninn er merktur.

Smelltu á reit til að gera hann að grunnlit.

50
100
200
300
400
500
600
700
800
900
950
slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

Hvernig þetta virkar

01

Skynrænn litaútreikningur

Skalinn og samsetningarnar eru reiknaðar í OKLCH, sama litarýminu og Tailwind v4 notar, svo tónarnir haldast jafnir fyrir augað í stað þess að detta í of dökka eða of mettaða tóna.

02

Festur á réttan tón

Grunnliturinn þinn er settur nákvæmlega í þann 50–950 reit sem passar við birtustig hans, og restin af skalanum er byggð í kringum hann.

03

Næsti Tailwind-litur

Við berum litinn saman við alla sjálfgefnu Tailwind-litina og sýnum þér næsta nafn og tón, svo þú getir haldið þig við staðlaða litakerfið ef þú vilt.

04

Tilbúið til afritunar

Afritaðu heilan @theme-blokk fyrir Tailwind v4 eða klassískt config-snið og límdu beint inn í verkefnið þitt.

Fleiri ókeypis verkfæri

Næsta skref

Þarftu hjálp við að koma litunum í alvöru vef? Við hönnum og smíðum vefsíður og vefforrit með Tailwind, Next.js og Supabase.

Fáðu tilboð