Kleurkode Generator & Picker

Genereer kleurkodes, variasies, harmonieë, en kontroleer kontrasverhoudings.

Kleurkonversie

HEX

#b400ff

Electric Violet

HEX
#b400ff
HSL
282, 100, 50
RGB
180, 0, 255
XYZ
37, 17, 96
CMYK
29, 100, 0, 0
LUV
48,51,-122
LAB
48, 88, -81
HWB
282, 0, 0

Variasies

Die doel van hierdie afdeling is om akkuraat tintjies (suiwer wit bygevoeg) en skakerings (suiwer swart bygevoeg) van jou gekose kleur in 10% inkremente te produseer.

Pro Wenk: Gebruik skakerings vir hover-states en skaduwees, tintjies vir hoogtepunte en agtergronde.

Skakerings

Donkerder variasies geskep deur swart by jou basiskleur te voeg.

Tintjies

Lighter variasies geskep deur wit by jou basiskleur te voeg.

Algemene Gebruik Gevalle

  • UI-komponenttoestande (hover, aktief, gedeaktiveer)
  • Diepte skep met skaduwees en hoogtepunte
  • Konsistente kleursisteme bou

Ontwerpstelsel Wenk

Hierdie variasies vorm die grondslag van 'n samehangende kleurpalet. Voer hulle uit om konsekwentheid oor jou hele projek te handhaaf.

Kleurkombinasies

Elke harmonie het sy eie stemming. Gebruik harmonies om kleurkombinasies te bedink wat goed saamwerk.

Hoe om te gebruik

Klik op enige kleur om sy hex-waarde te kopieer. Hierdie kombinasies is wiskundig bewys om visuele harmonie te skep.

Hoekom dit saak maak

Kleurharmonies skep balans en roep spesifieke emosies in jou ontwerpe op.

Komplement

'n Kleur en sy teenoorgestelde op die kleurwiel, +180 grade van tint. Hoë kontras.

#b400ff
Beste vir: Hoë-impak ontwerpe, CTA's, logo's

Gesplete-komplementêr

'n Kleur en twee aangrensend aan sy komplement, +/-30 grade van tint van die waarde teenoorgestelde die hoofkleur. Vet soos 'n reguit komplement, maar meer veelsydig.

Beste vir: Lewendige maar gebalanseerde uitlegte

Triadies

Drie kleure eweredig versprei langs die kleurwiel, elk 120 grade van tint uitmekaar. Beste om een kleur te laat domineer en die ander as aksente te gebruik.

Beste vir: Speelse, energieke ontwerpe

Analoog

Drie kleure van dieselfde ligsterkte en versadiging met tint wat aangrensend op die kleurwiel is, 30 grade uitmekaar. Gladde oorgange.

Beste vir: Natuur-geïnspireerde, kalmerende koppelvlakke

Monochromaties

Drie kleure van dieselfde tint met ligsterkte waardes +/-50%. Subtiel en verfynd.

Beste vir: Minimalistiese, gesofistikeerde ontwerpe

Tetradies

Twee stelle komplementêre kleure, geskei deur 60 grade van tint.

Beste vir: Ryk, diverse kleurpalette

Kleurteorie beginsels

Balans

Gebruik een dominante kleur, ondersteun met sekondêre, en aksent spaarzaam.

Kontras

Verseker voldoende kontras vir leesbaarheid en toeganklikheid.

Harmonie

Kleure moet saamwerk om 'n verenigde visuele ervaring te skep.

Kleurkontras Kontroleerder

Toets kleurkombinasies om te verseker dat hulle aan WCAG-toeganklikheidstandaarde vir teksleesbaarheid voldoen.

Teks Kleur
Agtergrond Kleur
Kontras
1.00
Fail
Baie swak
Klein teks
✖︎
Groot teks
✖︎
WCAG Standaarde
AA:Minimum kontrasverhouding van 4.5:1 vir normale teks en 3:1 vir groot teks. Vereis vir meeste webwerwe.
AAA:Verbeterde kontrasverhouding van 7:1 vir normale teks en 4.5:1 vir groot teks. Aanbeveel vir optimale toeganklikheid.
Onvoldoende kontras vir alle teksgroottes - voldoen nie aan WCAG-standaarde nie.

Gevorderde kontras kontroleerder

Verfyn met skuifknoppies, veelvuldige voorskoue & meer

Almal is 'n Genie. Maar as jy 'n Vis beoordeel op sy vermoë om 'n Boom te klim, sal dit sy hele lewe glo dat dit dom is.

- Albert Einstein

Tegniese Formate

Praktiese Formate

Kleuranalise

Kleurblindheid Simulator

Kreatiewe aspekte