Generator de coduri de culori &; Picker

Generați coduri de culori, variații, armonii și verificați raporturile de contrast.

Conversia culorilor

HEX

#ca4e4e

Chestnut Rose

HEX
#ca4e4e
HSL
0, 54, 55
RGB
202, 78, 78
XYZ
28, 19, 9
CMYK
0, 61, 61, 21
LUV
50,105,21,
LAB
50, 49, 26
HWB
0, 31, 21

Variații

Scopul acestei secțiuni este de a produce cu acuratețe nuanțe (alb pur adăugat) și nuanțe (negru pur adăugat) ale culorii selectate în trepte de 10%.

Sfat profesional: Utilizați nuanțe pentru stările de trecere și umbre, nuanțe pentru evidențiere și fundaluri.

Nuanțe

Variații mai întunecate create prin adăugarea de negru la culoarea de bază.

Nuanțe

Variații mai deschise create prin adăugarea de alb la culoarea de bază.

Cazuri comune de utilizare

  • Stările componentelor interfeței de utilizator (hover, activ, dezactivat)
  • Crearea adâncimii cu ajutorul umbrelor și luminilor
  • Construirea unor sisteme de culori coerente

Sfat pentru sistemul de proiectare

Aceste variații formează baza unei palete de culori coerente. Exportați-le pentru a menține coerența în întregul proiect.

Combinații de culori

Fiecare armonie are propria sa stare de spirit. Utilizați armoniile pentru a găsi combinații de culori care funcționează bine împreună.

Cum se utilizează

Faceți clic pe orice culoare pentru a-i copia valoarea hexagonală. S-a demonstrat matematic că aceste combinații creează armonie vizuală.

De ce este important

Armoniile culorilor creează echilibru și evocă emoții specifice în desenele dvs.

Completare

O culoare și opusul său pe roata culorilor, +180 grade de nuanță. Contrast ridicat.

#ca4e4e
Cel mai bun pentru: Designuri, CTA-uri, logo-uri de mare impact

Split-complementare

O culoare și două adiacente complementului său, la +/-30 de grade de nuanță față de valoarea opusă culorii principale. Îndrăzneț ca un complement direct, dar mai versatil.

Cel mai bun pentru: Aspecte vibrante, dar echilibrate

Triadic

Trei culori distanțate uniform de-a lungul roții culorilor, fiecare la 120 de grade de nuanță. Cel mai bine este să lăsați o culoare să domine și să le folosiți pe celelalte ca accente.

Cel mai bun pentru: Modele jucăușe, energice

Analogic

Trei culori cu aceeași luminanță și saturație, cu nuanțe adiacente pe roata culorilor, la 30 de grade distanță. Tranziții ușoare.

Cel mai bun pentru: Interfețe calmante, inspirate din natură

Monocromatic

Trei culori de aceeași nuanță cu valori ale luminanței de +/-50%. Subtil și rafinat.

Cel mai bun pentru: Design minimalist, sofisticat

Tetradic

Două seturi de culori complementare, separate de 60 de grade de nuanță.

Cel mai bun pentru: Scheme de culori bogate, diverse

Principiile teoriei culorilor

Echilibru

Utilizați o culoare dominantă, susțineți-o cu o culoare secundară și accentuați-o cu moderație.

Contrast

Asigurați un contrast suficient pentru lizibilitate și accesibilitate.

Armonie

Culorile trebuie să lucreze împreună pentru a crea o experiență vizuală unificată.

Verificator de contrast de culoare

Testați combinațiile de culori pentru a vă asigura că acestea respectă standardele de accesibilitate WCAG pentru lizibilitatea textului.

Culoarea textului
Culoarea fundalului
Contrast
Fail
Text mic
✖︎
Text mare
✖︎
Standardele WCAG
AA:Raport minim de contrast de 4,5:1 pentru text normal și 3:1 pentru text mare. Necesar pentru majoritatea site-urilor web.
AAA:Raport de contrast îmbunătățit de 7:1 pentru text normal și 4,5:1 pentru text mare. Recomandat pentru o accesibilitate optimă.

Oricine este un geniu. Dar dacă judeci un pește după capacitatea sa de a se cățăra într-un copac, acesta își va trăi toată viața crezând că este prost.

- Albert Einstein

Formate tehnice

Formate practice

Analiza culorilor

Simulator de orbire

Aspecte creative