Kleurconversie
#ca4e4e
≈ Chestnut Rose
Variaties
Het doel van dit onderdeel is om nauwkeurig tinten (puur wit toegevoegd) en schaduwen (puur zwart toegevoegd) van je geselecteerde kleur te produceren in stappen van 10%.
Pro Tip: Gebruik tinten voor zweefstanden en schaduwen, en tinten voor hooglichten en achtergronden.
Schaduwen
Donkere variaties worden gemaakt door zwart toe te voegen aan je basiskleur.
Tinten
Lichtere variaties die worden gecreëerd door wit toe te voegen aan je basiskleur.
Algemene gebruikssituaties
- • Toestanden van UI-componenten (zweven, actief, uitgeschakeld)
- • Diepte creëren met schaduwen en hooglichten
- • Consistente kleursystemen bouwen
Ontwerp Systeem Tip
Deze variaties vormen de basis van een samenhangend kleurenpalet. Exporteer ze om consistentie in je hele project te behouden.
Kleurencombinaties
Elke harmonie heeft zijn eigen sfeer. Gebruik harmonieën om te brainstormen over kleurencombinaties die goed bij elkaar passen.
Hoe te gebruiken
Klik op een kleur om de hexadecimale waarde te kopiëren. Het is wiskundig bewezen dat deze combinaties visuele harmonie creëren.
Waarom het belangrijk is
Kleurharmonieën creëren balans en roepen specifieke emoties op in je ontwerpen.
Complementaire kleur
Een kleur en zijn tegenpool op de kleurencirkel, +180 graden in de kleurencirkel. Hoog contrast.
Gesplitst-complementair
Een kleur en twee aangrenzende complementaire kleuren. Gedurfd als een directe complementaire kleur, maar veelzijdiger.
Triadisch
Drie kleuren gelijkmatig verdeeld over het kleurenwiel, elk 120 graden in tint uit elkaar. Het beste is om één kleur te laten overheersen en de andere als accenten te gebruiken.
Analoog
Drie kleuren met dezelfde helderheid en verzadiging met tinten die naast elkaar liggen op het kleurenwiel, 30 graden uit elkaar. Vloeiende overgangen.
Monochromatisch
Drie kleuren van dezelfde tint met luminantiewaarden +/-50%. Subtiel en verfijnd.
Tetradisch
Twee sets complementaire kleuren, gescheiden door 60 graden in de kleurencirkel.
Kleurentheorie Principes
Balans
Gebruik één dominante kleur, ondersteun met een secundaire kleur en accentueer spaarzaam.
Contrast
Zorg voor voldoende contrast voor leesbaarheid en toegankelijkheid.
Harmonie
Kleuren moeten samenwerken om een uniforme visuele ervaring te creëren.
Kleurcontrast Controle
Test kleurencombinaties om ervoor te zorgen dat ze voldoen aan de WCAG toegankelijkheidsnormen voor leesbaarheid van tekst.
Tekstkleur
Achtergrondkleur
Contrast
WCAG-standaarden
Iedereen is een genie. Maar als je een vis beoordeelt op zijn vermogen om in een boom te klimmen, zal hij zijn hele leven geloven dat hij dom is.