Lumaktaw sa pangunahing nilalaman
LibraTool logoLibraTool

Libreng Color Picker at Palette Generator

Pumili ng mga kulay, mag-convert sa pagitan ng HEX/RGB/HSL, at gumawa ng magkakaayon na palette.

Gumagana offline kapag na-load na
HEX
HSV
h217Β°
s76%
v96%
ipakita lamang

RGB

r
g
b

HSL

H
S
L

Higit pang mga format

HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)

WCAG contrast

Pinakamalapit na may pangalang kulay: dodgerblue Β· Mas madaling basahin dito ang itim na text (5.71:1)

Teksto sa puti3.68:1AA malaki
Teksto sa itim5.71:1AA
Text sa #ffffff3.68:1AA malaki

Mga shade at tint (50–950)

Palette ng kulay

Magkabaligtaran

#3b82f6
#f6af3c

Triadic

#3b82f6
#f63c83
#83f63c

Analogous

#3ce0f6
#3b82f6
#523cf6

Monochromatic

#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd

Mga karaniwang gamit

  • Color Picker para sa Web DesignPumili at lumikha ng mga kulay para sa iyong website β€” makakuha ng HEX, RGB, at HSL na mga halaga plus harmonious palette.
  • Color Picker para sa BrandingBumuo ng iyong brand color palette β€” pumili ng primary, secondary, at accent color na nagtutulungan.
  • Color Picker para sa Social MediaLumikha ng nakakaakit na mga color palette para sa mga social media post, kuwento, at disenyo ng profile.
  • Color Picker para sa Print DesignPumili ng mga kulay para sa mga materyales na naka-print β€” mga flyer, business card, brochure β€” na may tumpak na color preview.
  • Color Picker para sa Mga PresentasyonDinisenyo ang mga scheme ng kulay β€” pumili ng readable na kulay ng teksto, chart palette, at pare-parehong accent shade.

Paano ito Gumagana

Direktang tumatakbo ang lahat sa iyong browser gamit ang hand-written na conversion math β€” walang color library, walang server round-trip. Pumipili ka ng kulay sa native na color input ng browser o sa EyeDropper API, at agad itong kino-convert ng tool sa anim na format habang kinakalkula rin ang mga WCAG contrast ratio at gumagawa ng harmony palette.

  1. 1
    Color input sa pamamagitan ng native API
    Pumipili ka ng kulay sa built-in na <input type="color"> widget ng browser, o β€” sa mga browser na batay sa Chromium β€” hinahayaan ka ng EyeDropper API na kumuha ng sample sa kahit anong pixel sa screen mo. Parehong nagbabalik ng hex string na nagiging iisang pinagmumulan ng katotohanan.
  2. 2
    Hand-written na format conversion
    Kino-convert ng tool ang hex value sa RGB, HSL, HSV, CMYK, at OKLCH gamit ang sarili nitong math function (walang panlabas na library). Nili-linearize ng OKLCH conversion ang mga sRGB channel, ina-apply ang OKLab cube-root matrix, pagkatapos ay kinukuha ang chroma at hue angle β€” tugma sa modernong CSS Color Level 4 na output.
  3. 3
    Kalkulasyon ng WCAG contrast ratio
    Kinakalkula ang relative luminance mula sa linearized na mga RGB channel gamit ang WCAG 2.x formula. Pagkatapos, kinakalkula ng tool ang mga contrast ratio laban sa purong puti at purong itim at nilalagyan ng label na AA-large, AA, AAA, o Fail ayon sa mga WCAG threshold (3:1, 4.5:1, 7:1).
  4. 4
    Paggawa ng harmony palette at lokal na pag-save
    Kinukuha ang mga complementary, triadic, analogous, at monochromatic na swatch sa matematikong pag-ikot o pag-hakbang ng HSL hue at lightness value. Isinusulat ang mga naka-save na palette sa localStorage ng iyong browser β€” walang umaalis sa device mo.

Mga Kaugnay na Tool

🎨

Random Color Generator

Gumawa ng mga random na kulay nang isa-isa o bilang palette ng lima, i-lock ang mga gusto mo, kopyahin ang mga halagang HEX, RGB o HSL at i-export ang palette bilang PNG o CSS.

Subukan
🎨

Converter ng Kulay

I-convert ang mga kulay sa pagitan ng HEX, RGB, HSL, HSV, at CMYK na mga format nang mabilis. Kasama ang lightness scale at mga preset na swatch.

Subukan
🎨

Extractor ng Color Palette mula sa Larawan

Kunin ang mga dominant na kulay mula sa anumang larawan gamit ang k-means color quantization. Makakuha ng mga hex code para sa nangungunang 2-16 na kulay sa iyong larawan o logo.

SubukanLokal ang mga file

Mga Madalas na Itanong