Milih warna dina HSL karasa merenah, tapi stylesheet, handoff desain jeung dokumén merk masih ngagunakeun HEX. Konverter ieu nutup jarak éta jeung méré kode genep digit pikeun sagala kombinasi hue, saturation jeung lightness.
Kumaha konvérsi HSL ka HEX jalanna
- Robah saturation jeung lightness jadi fraksi: 60% jadi 0.6.
- Itung chroma C = (1 − |2L − 1|) × S — éta nunjukkeun sabaraha jauh warna tina keabuan (grey).
- Paké hue pikeun nempatkeun chroma éta kana saluran red, green jeung blue, tuluy geser katiluna ku L − C/2.
- Kalikeun unggal saluran ku 255, bunderkeun, teras tulis salaku dua digit hexadecimal.
Conto nu jalan
Bunderkeun lumangsung sakali, dina léngkah panungtungan, nalika unggal saluran digancangkeun jadi nilai bulat 0–255. Hasilna téh kode HEX pangdeukeutna kana input HSL maneh jeung biasana sarua jeung anu ditingalkeun ku alat desain.
HSL jeung HEX dijelaskeun
Naon éta HSL?
HSL mecah warna jadi hue (0–360° dina roda warna), saturation (sabaraha warna, 0–100%) jeung lightness (sabaraha caang, 0–100%). Kusabab masing-masing bagian cocog jeung cara jalma ngajelaskeun warna, HSL mangrupa format anu paling gampang pikeun nyieun tint, shade jeung palét anu konsisten — sacara manual atawa dina kode.
- Sintaks:
- hsl(H, S%, L%)
- Rentang:
- 0–360°, 0–100%, 0–100%
- Pangalusna pikeun:
- palét, tint jeung shade, theming
Naon éta HEX?
Kode HEX nyaéta angka hexadecimal genep-digit anu nyimpen kanal beureum, héjo jeung biru tina warna sanggeus tanda #. Unggal pasang digit ngawengku hiji kanal, ti 00 (teu aya) nepi ka FF (penuh), anu masihan jumlah warna anu sarua jeung RGB (16.7 juta) dina notasi leuwih singket. HEX jadi default dina CSS, alat desain jeung pedoman merk.
- Sintaks:
- #RRGGBB
- Rentang:
- 00–FF per kanal
- Pangalusna pikeun:
- CSS, handoff desain, pedoman merk
tabel rujukan HSL ka HEX
Warna CSS anu paling umum, dikonversi ti HSL ka HEX.
| Warna | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |