Generator ng Color Code at Picker

Gumawa ng mga color code, variation, harmony, at suriin ang contrast ratios.

Pag-convert ng Kulay

HEX

#edb381

Tacao

HEX
#edb381
HSL
28, 75, 72
RGB
237, 179, 129
XYZ
55, 52, 28
CMYK
0, 24, 46, 7
LUV
77,56,43
LAB
77, 15, 34
HWB
28, 51, 7

Mga Pagkakaiba-iba

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

Pro Tip: Gamitin ang shades para sa hover states at shadows, tints para sa highlights at backgrounds.

Shades

Mas madidilim na mga pagkakaiba-iba na nilikha sa pamamagitan ng pagdaragdag ng itim sa iyong base na kulay.

Tints

Mas magagaan na mga pagkakaiba-iba na nilikha sa pamamagitan ng pagdaragdag ng puti sa iyong base na kulay.

Karaniwang Paggamit

  • Mga estado ng UI component (hover, active, disabled)
  • Paglikha ng lalim gamit ang shadows at highlights
  • Pagbuo ng pare-parehong mga sistema ng kulay

Tip sa Design System

Ang mga pagkakaiba-iba na ito ang bumubuo sa pundasyon ng isang magkakaugnay na color palette. I-export ang mga ito upang mapanatili ang pagkakapare-pareho sa buong proyekto mo.

Mga Kombinasyon ng Kulay

Ang bawat harmony ay may sariling mood. Gamitin ang harmonies upang mag-brainstorm ng mga kombinasyon ng kulay na mahusay na nagtutulungan.

Paano Gamitin

I-click ang anumang kulay upang kopyahin ang hex value nito. Ang mga kombinasyong ito ay matematikal na napatunayang lumikha ng visual harmony.

Bakit Mahalaga

Ang mga color harmonies ay lumilikha ng balanse at nagpapahayag ng tiyak na emosyon sa iyong mga disenyo.

Komplemento

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

#edb381
Pinakamahusay para sa: Mga disenyo na may mataas na epekto, CTAs, mga logo

Hating-komplemento

Isang kulay at dalawa na katabi ng komplemento nito, +/-30 degrees ng hue mula sa kabaligtaran ng pangunahing kulay. Matapang tulad ng tuwid na komplemento, ngunit mas maraming gamit.

Pinakamahusay para sa: Makulay ngunit balanseng mga layout

Triadik

Tatlong kulay na pantay ang agwat sa color wheel, bawat isa ay 120 degrees ng hue ang pagitan. Pinakamainam na hayaan ang isang kulay na mangibabaw at gamitin ang iba bilang accent.

Pinakamahusay para sa: Masigla at masayang mga disenyo

Magkakatulad

Tatlong kulay na may parehong liwanag at saturation na may mga hue na magkatabi sa color wheel, 30 degrees ang pagitan. Makinis na mga transisyon.

Pinakamahusay para sa: Mga interface na inspirasyon ng kalikasan, nakapapawi

Monokromatiko

Tatlong kulay ng parehong hue na may mga halaga ng liwanag na +/-50%. Banayad at pino.

Pinakamahusay para sa: Minimalistang, sopistikadong mga disenyo

Tetradik

Dalawang set ng mga complementary na kulay, na pinaghihiwalay ng 60 degrees ng hue.

Pinakamahusay para sa: Mayamang, magkakaibang mga scheme ng kulay

Mga Prinsipyo ng Teorya ng Kulay

Balanse

Gumamit ng isang dominanteng kulay, suportahan ng pangalawa, at gamitin ang accent nang matipid.

Kontrahan

Siguraduhing may sapat na kontrahan para sa mababasa at accessible na disenyo.

Harmonya

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

Tagasuri ng Kontrahan ng Kulay

Subukan ang mga kumbinasyon ng kulay upang matiyak na nakakatugon ito sa mga pamantayan ng accessibility ng WCAG para sa pagbabasa ng teksto.

Kulay ng Teksto
Kulay ng Background
Kontrahan
1.00
Fail
Napakahina
Maliit na teksto
✖︎
Malaking teksto
✖︎
Mga Pamantayan ng WCAG
AA:Minimum na ratio ng kontrahan na 4.5:1 para sa normal na teksto at 3:1 para sa malaking teksto. Kinakailangan para sa karamihan ng mga website.
AAA:Pinahusay na ratio ng kontrahan na 7:1 para sa normal na teksto at 4.5:1 para sa malaking teksto. Inirerekomenda para sa pinakamainam na accessibility.
Hindi sapat ang contrast para sa lahat ng laki ng teksto - hindi pumapasa sa mga pamantayan ng WCAG.

Advanced na Tagasuri ng Kontrahan

Pinuhin gamit ang mga slider, maraming preview at iba pa

Lahat ay Henyo. Ngunit Kung Huhusgahan Mo ang Isang Isda sa Kakayahan Nitong Umakyat sa Puno, Mabubuhay Ito ng Buong Buhay Nito na Naniniwalang Ito ay Bobo.

- Albert Einstein

Mga Teknikal na Format

Praktikal na Format

Pagsusuri ng Kulay

Simulator ng Pagkabulag

Mga Malikhaing Aspeto