Conversia culorilor

Conversii – Detalii – Armonii – Imagini – Previzualizare – Simulare daltonism – CSS – Ajutor

Conversii

Aici vedeți culoarea dvs. convertită în 15 formate de culoare diferite, cum ar fi RGB, CMYK, HSV, HSL, CIELab, Android, Decimal și YUV.

🤖 Convertiți mai multe culori deodată sau 📢 obțineți Conversii și Armonii prin intermediul REST API.

Conversii Partea 1

Format	Color
Hex	496C3C 📋
	RGB		73, 108, 60 📋
RGB Procent	29%, 42%, 24% 📋
CMY	0.7137, 0.5765, 0.7647 📋
CMYK		0.32, 0.00, 0.44, 0.58 📋
HSL	104°, 29%, 33% 📋
HSV	104°, 44%, 42% 📋
XYZ	8.9258, 12.4678, 6.2111 📋

Conversii Partea 2

Format	Color
RYB	60, 108, 95 📋
	Decimal	4811836 📋
CIELab	41.95, -22.52, 22.92 📋
CIELCh	42, 32.133, 134.485 📋
	Yxy	12.4678, 0.3233, 0.4517 📋
Android (android.graphics.Color)	4283001916 (0xFF496C3C) 📋
	YUV	92.0630, -15.8071, -16.7183 📋

• 📕 HOWCOLORS.WORK
• Distribuție
• Luminozitate & Gradiente de saturație
• Analogice
• Triadă
• Complementar
• Complementară divizată
• Square
• Rectangle
• Sweetspot
• Fundal alb
• Color Contrast Check
• Fundal negru
• Color Contrast Check
• RGB 73, 108, 60 Background
• Dichromația
• Tricromia
• Monocromie
• Text
• Border
• Background
• 📕 HOWCOLORS.WORK
• Conversie
• Detalii
• Armonii
• SVG Images
• Preview-uri
• Color Blindness Simulation
• Exemple CSS
• Color Bucket
• Controlează contrastul culorilor

📕 HOWCOLORS.WORK

Un ghid de notare a culorilor CSS.

sau cumpărați-o pe Leanpub!

Detalii

Culoarea RGB 73, 108, 60 este o culoare închisă, iar versiunea websafe este hex 336633. Un complement al acestei culori ar fi 95, 60, 108, iar versiunea în tonuri de gri este 92, 92, 92.
O versiune cu 20% mai deschisă a culorii originale este 123, 160, 108, iar 26, 60, 16 este culoarea cu 20% mai închisă. Dacă saturați culoarea cu 10%, obțineți 65, 108, 49, iar dacă o desaturați cu 10%, este 81, 108, 71.

Distribuție

Luminozitate & Gradiente de saturație

Aceste gradiente arată cum se modifică culoarea RGB 73, 108, 60 prin modificarea luminozității cu 10 procente. Prima figură arată o schimbare cu +10% pentru fiecare culoare, iar a doua figură -10%.

Similare cu gradienții de luminozitate, dar următorii gradienți de saturație arată o schimbare a culorii RGB 73, 108, 60 prin schimbarea saturației cu 10% în loc de aceasta.

Armonii

Imagini SVG

O selecție de imagini SVG care utilizează versiunea hexagonală #496C3C a culorii curente.

Analize

Monocromie

Exemple CSS

Text

Proprietatea CSS pentru a schimba culoarea textului în RGB 73, 108, 60 se numește „color”. Proprietatea color poate fi setată pe clase, id-uri sau direct pe elementul HTML.

Acest exemplu arată cum arată un text în culoarea rgb(73, 108, 60).

📋 Copy Code

Dacă doriți să adăugați o umbră de text în acea culoare folosiți proprietatea text-shadow, puteți genera o umbră de text direct cu generatorul nostru 🔧 CSS Text Shadow Generator.

Aici vedeți cum arată un text negru cu o umbră colorată de 4 pixeli rgb(73, 108, 60).

📋 Copy Code

Border

Proprietatea CSS pentru a schimba marginea unui element în RGB 73, 108, 60 se numește „border”. Proprietatea border poate fi setată pe clase, id-uri sau direct pe elementul HTML.

Acest exemplu arată culoarea ca border, aceasta poate fi aplicată prin intermediul proprietății CSS „border” sau „border-color”.

📋 Copy Code

Dacă trebuie schimbată doar culoarea marginii, folosiți proprietatea border-color.

📋 Copy Code

Dacă doriți să adăugați o umbră de cutie în acea culoare folosiți:

Aici vedeți cum arată o cutie cu o umbră de 4 pixeli de culoare rgb(73, 108, 60).

📋 Copy Code

Background

Proprietatea CSS pentru a schimba culoarea de fundal a unui element la RGB 73, 108, 60 se numește „background”. Proprietatea „background” poate fi setată pe clase, id-uri sau direct pe elementul HTML.

📋 Copy Code

Dacă trebuie schimbată doar culoarea de fundal se poate folosi:

📋 Copy Code

Acest exemplu arată culoarea ca fundal, aceasta este aplicată prin intermediul proprietății CSS „background”.

Pentru a vă optimiza și comprima codul CSS, puteți folosi compresorul și optimizatorul nostru CSS online bazat pe csstidy. Dacă doriți să creați un gradient liniar sau radial ca fundal sau bordură, consultați generatorul nostru 🌈 CSS Gradient Generator.

📕 HOWCOLORS.WORK

Un ghid de notare a culorilor CSS.

sau cumpărați-l de pe Leanpub!

Cum se utilizează Conversia culorilor

Conversie

Pentru a converti, lipiți un șir de caractere într-unul din aceste formate de culoare, de exemplu, „496C3C”, în câmpul de introducere și faceți clic pe convertire. Rezultatul se va afla în secțiunea Conversii, iar următoarele secțiuni vă vor oferi detalii suplimentare despre culoare.

Câteva formate de culoare folosesc aceeași notație, iar conversia va ghici compoziția interogării de căutare. Ca exemplu, dacă încercați să convertiți șirul de caractere „104°, 44%, 42%” ar putea fi o culoare HSV sau HSL, conversia va presupune HSL în acest caz.

Dacă acest lucru ar putea duce la conversii greșite, puteți defini ce format treceți prin înfășurarea șirului de culori între paranteze cu formatul în față. Șirul de căutare „HSV(104°, 44%, 42%)” vă va da culoarea HSV corectă, deoarece nu este nevoie să ghiciți formatul. Alte exemple ar fi „CIELAB(41.95, -22.52, 22.92)”, „CIELCH(42, 32.133, 134.485)”, „YXY(12.4678, 0.3233, 0.4517)” și „CMYK(0.32, 0.00, 0.44, 0.58)”.

Detalii

În secțiunea de detalii, obțineți mai întâi un rezumat al culorii și, dacă este disponibilă, o descriere, cum ar fi „roșu închis stins”. Puteți vedea distribuția culorilor în diferite formate. De exemplu, în formatul RGB, ajungeți să cunoașteți cantitatea de roșu, verde și albastru din culoarea dumneavoastră.

În cele din urmă, obțineți gradienți de luminozitate și saturație ai culorii dumneavoastră în pași de 10%. Deci, dacă aveți nevoie de o versiune mai luminoasă sau mai întunecată, o puteți alege de aici.

Armonii

Armoniile vă arată practic culorile care se potrivesc bine cu culoarea pe care o vizualizați în prezent. Dacă vă place una dintre armonii, puteți crea direct un 🌈 CSS Gradient sau 🔧 CSS Text Shadow din ea sau puteți vizualiza armonia ca 🖌️ Color Bucket.

SVG Images

Acestă secțiune scurtă vă arată o selecție de fișiere SVG care utilizează culoarea curentă. Puteți descărca aceste fișiere și le puteți utiliza în proiectele dvs., de exemplu, ca imagine de fundal.

Preview-uri

Vreți să vedeți cum arată culoarea dvs. pe un fundal alb sau negru? Atunci ar trebui să verificați secțiunea „Previews” din pagina de culori.

Vezi, de asemenea, contrastul culorii tale pe aceste fundaluri și primești un link către Color Contrast Checker cu culoarea ta preselectată.

Color Blindness Simulation

Când selectezi o culoare pentru proiectul tău, ar fi bine să ții cont de modul în care această culoare este percepută de orice persoană cu o deficiență de vedere a culorilor. Prin urmare, am adăugat această secțiune care vă arată previzualizări ale culorii dvs. pentru diferite deficiențe de vedere a culorilor.

Exemple CSS

Dacă sunteți nou în dezvoltarea web, poate doriți să vedeți cum să aplicați culoarea dvs. ca prim-plan, fundal sau culoare de frontieră. Secțiunea „Exemple CSS” vă oferă exact acest lucru, vă ajută cum să folosiți culoarea curentă în CSS.

Dacă vizualizați o culoare într-un format care nu este disponibil în CSS, atunci veți vedea culoarea convertită într-un format compatibil.

Color Bucket

V-ați decis asupra culorilor pentru următorul proiect și doriți să le descărcați ca o paletă sau să le împărtășiți cu prietenii pentru a discuta decizia dumneavoastră? Atunci ar trebui să aruncați o privire la color bucket. Acesta vă permite să stocați până la 10 culori, creează automat palete de culori pentru fiecare dintre aceste culori pe baza luminozității și vă oferă o matrice WCAG.

Puteți descărca fiecare dintre paletele de culori sau culorile selectate ca o paletă GIMP, Adobe® ASE sau Tailwind CSS. În plus, puteți vizualiza totul ca un 🌈 CSS Gradient, 🔧 CSS Text Shadow sau 📷 Color Palette Image.

Pentru a adăuga o culoare la paleta dvs. de culori, am pus un link „❤️ Adaugă această culoare la paleta de culori” în secțiunea de antet a fiecărei pagini de pe acest site.

Controlează contrastul culorilor

Când vă decideți asupra culorilor pentru un proiect, este esențial să țineți cont de contrastul culorilor. My Color Contrast Checker vă permite să verificați culorile pe care le-ați selectat în conformitate cu Web Content Accessibility Guidelines (WCAG) 2.0.

.