Komportable magpili ug kolor sa HSL, pero ang stylesheets, design handoffs ug brand documents kasagaran modagan pa gihapon sa HEX. Kining converter mag-sirado sa gap ug mohatag kanimo sa six-digit code para sa bisan unsang kombinasyon sa hue, saturation ug lightness.
Giunsa pagtrabaho ang konbersyon gikan sa HSL ngadto sa HEX
- I-turn ang saturation ug lightness ngadto sa fractions: ang 60% mahimong 0.6.
- Kwentaha ang chroma C = (1 − |2L − 1|) × S — mao kana kung unsa kalayo ang kolor gikan sa grey.
- Gamita ang hue aron ibutang ang chroma sa red, green ug blue channels, dayon i-shift ang tulo tanan pinaagi sa L − C/2.
- I-multiply ang matag channel sa 255, i-round kini, ug isulat ingon duha ka hexadecimal digits.
Gihimong pananglitan
Ang rounding mahitabo ra sa katapusang hugna, kung ang matag channel i-snap sa whole 0–255 value. Ang resulta mao ang labing duol nga HEX code sa imong HSL input ug kasagarang parehas sa ipakita sa design tool.
HSL ug HEX gipatin-aw
Unsa ang HSL?
Ang HSL nagbahin sa usa ka kolor ngadto sa hue (0–360° sa color wheel), saturation (kung unsa ka kolorful, 0–100%) ug lightness (kung unsa ka hayag, 0–100%). Tungod kay ang matag bahin mohaom sa paagi sa paghulagway sa kolor sa tawo, ang HSL mao ang pinakasayon nga format para sa paghimo og tints, shades ug konsistenteng palettes — manwal o sa code.
- Sintaks:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Pinakamaayo para sa:
- palettes, tints and shades, theming
Unsa ang HEX?
Ang HEX code usa ka unom-ka-digit nga hexadecimal nga numero nga nag-imbak sa red, green ug blue channel sa usa ka kolor nga gisundan sa #. Ang matag pares sa digit nagrepresentar sa usa ka channel, gikan sa 00 (wala) hangtod FF (puno), nga naghatag sa samang 16.7 milyones nga kolor sama sa RGB apan sa mas mubo nga notasyon. Ang HEX ang default sa CSS, design tools ug brand guidelines.
- Sintaks:
- #RRGGBB
- Range:
- 00–FF per channel
- Pinakamaayo para sa:
- CSS, design handoff, brand guidelines
HSL ngadto sa HEX reference nga lamesa
Ang kasagarang CSS nga mga kolor, gikombertir gikan sa HSL ngadto sa HEX.
| Kolor | 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 |