Tagabuo at Tagapili ng Color Code

Bumuo ng mga color code, variation, harmonies, at suriin ang contrast ratio.

Kulay-Conversion

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

Mga pagkakaiba-iba

Ang layunin ng seksyong ito ay tumpak na makagawa ng mga tints (purong puti na idinagdag) at mga kulay (purong itim na idinagdag) ng iyong napiling kulay sa 10% na mga pagtaas.

Pro Tip: Gumamit ng mga shade para sa hover states at shadows, tints para sa mga highlight at background.

Mga shade

Mas madidilim na mga variation na ginawa sa pamamagitan ng pagdaragdag ng itim sa iyong baseng kulay.

Tints

Mas magaan na mga variation na ginawa sa pamamagitan ng pagdaragdag ng puti sa iyong baseng kulay.

Mga Kaso ng Karaniwang Paggamit

  • Mga estado ng bahagi ng UI (hover, aktibo, hindi pinagana)
  • Lumilikha ng lalim gamit ang mga anino at highlight
  • Bumuo ng pare-parehong mga sistema ng kulay

Tip sa Sistema ng Disenyo

Ang mga pagkakaiba-iba na ito ay bumubuo sa pundasyon ng isang magkakaugnay na paleta ng kulay. I-export ang mga ito upang mapanatili ang pagkakapare-pareho sa iyong buong proyekto.

Mga Kumbinasyon ng Kulay

Ang bawat pagkakaisa ay may sariling mood. Gumamit ng mga harmonies upang mag-brainstorm ng mga kumbinasyon ng kulay na mahusay na gumagana nang magkasama.

Paano Gamitin

Mag-click sa anumang kulay upang kopyahin ang hex na halaga nito. Ang mga kumbinasyong ito ay mathematically proven na lumikha ng visual harmony.

Bakit Ito Mahalaga

Lumilikha ang mga harmonies ng kulay ng balanse at nagdudulot ng mga partikular na emosyon sa iyong mga disenyo.

Komplemento

Isang kulay at ang kabaligtaran nito sa color wheel, +180 degrees ng hue. Mataas na contrast.

#ca4e4e
Pinakamahusay para sa: Mga disenyong may mataas na epekto, mga CTA, mga logo

Split-complementary

Isang kulay at dalawang katabi ng komplemento nito, +/-30 degrees ng kulay mula sa halaga sa tapat ng pangunahing kulay. Bold tulad ng isang tuwid na pandagdag, ngunit mas maraming nalalaman.

Pinakamahusay para sa: Masigla ngunit balanseng mga layout

Triadic

Tatlong kulay ang pantay-pantay sa kahabaan ng color wheel, bawat isa ay 120 degrees ng kulay ang pagitan. Pinakamainam na payagan ang isang kulay na mangibabaw at gamitin ang iba bilang mga accent.

Pinakamahusay para sa: Mapaglaro, masiglang mga disenyo

Katulad

Tatlong kulay ng parehong luminance at saturation na may mga kulay na magkatabi sa color wheel, 30 degrees ang pagitan. Makinis na mga transition.

Pinakamahusay para sa: Nature-inspired, calming interface

Monochromatic

Tatlong kulay ng parehong kulay na may mga halaga ng luminance +/-50%. Pino at pino.

Pinakamahusay para sa: Minimalist, sopistikadong disenyo

Tetradic

Dalawang hanay ng mga pantulong na kulay, na pinaghihiwalay ng 60 degrees ng kulay.

Pinakamahusay para sa: Mayaman, magkakaibang mga scheme ng kulay

Mga Prinsipyo ng Teoryang Kulay

Balanse

Gumamit ng isang nangingibabaw na kulay, suporta sa pangalawa, at accent nang bahagya.

Contrast

Tiyakin ang sapat na kaibahan para sa pagiging madaling mabasa at naa-access.

Harmony

Dapat magtulungan ang mga kulay upang lumikha ng pinag-isang visual na karanasan.

Color Contrast Checker

Subukan ang mga kumbinasyon ng kulay upang matiyak na nakakatugon ang mga ito sa mga pamantayan sa pagiging naa-access ng WCAG para sa pagiging madaling mabasa ng teksto.

Kulay ng teksto
Kulay ng background
Contrast
Fail
Maliit na text
✖︎
Malaking text
✖︎
Mga Pamantayan ng WCAG
AA:Minimum na contrast ratio na 4.5:1 para sa normal na text at 3:1 para sa malaking text. Kinakailangan para sa karamihan ng mga website.
AAA:Pinahusay na contrast ratio na 7:1 para sa normal na text at 4.5:1 para sa malaking text. Inirerekomenda para sa pinakamainam na accessibility.

Lahat ay isang Genius. Ngunit Kung Huhusgahan Mo ang Isda sa Kakayahang Umakyat Ng Puno, Buong Buhay Nito Ang Paniniwalang Ito ay Tanga.

- Albert Einstein

Mga Teknikal na Format

Mga Praktikal na Format

Pagsusuri ng Kulay

Simulator ng Pagkabulag

Malikhaing Aspeto