HSL na-akọwa agba dịka ndị mmadụ si kwuo ya: hue gịnị, oleka agba (colorful), oleka ìhè (bright). Ịgbanwe koodu HEX gaa HSL bụ ụzọ ngwa ngwa iji nweta agba n'ụdị ị nwere ike gbanwee — mee ka ọ dịrị ọkụ, mee ka ọ daa ụda, ma ọ bụ wuo ogo agba niile site na ya.
Olee otú HEX gaa HSL si arụ ọrụ
- Tụgharịa koodu HEX gaa RGB ma kụọ ọwa ọ bụla site na 255, ka atọ ahụ bụrụ n'etiti 0 na 1.
- Chọta ihe kacha ibu na nke kacha nta n’ime atọ ahụ. Nkezi ha bụ lightness L.
- Ike dị n’etiti ha na-akọwa saturation S: kụọ ya site na (2 − max − min) maka agba dị ọkụ, ma ọ bụ site na (max + min) maka ndị gbara ọchịchịrị.
- Ọwa nke nwere akara kacha elu na-akpebi hue H — uhie na 0°, akwụkwọ ndụ na 120°, anụnụ anụnụ na 240° — na ọwa ndị ọzọ abụọ na-etinye hue n’ime segment ahụ.
Nke gosiri otu esi eme ya
Mgbakọ dị kpọmkwem, ma a na-ejikarị HSL gbanwee gaa ogo zuru ezu na pasentị. Ịtụgharị azụ nwere ike ibute mgbanwe otu ma ọ bụ abụọ n’ọwa RGB site na mbụ — na anya agaghị ahụ ya, ma bara uru ịma ma ị na-eme ntụgharị ọtụtụ ugboro.
HEX na HSL kọwara
Gịnị bụ HEX?
Koodu HEX bụ nọmba hexadecimal nke nwere mkpụrụ isii nke na-echekwa ọwa uhie, akwụkwọ ndụ na anụnụ anụnụ nke agba n'azụ akara #. Kwalite nkeji abụọ n'ime ha na-anọchi otu ọwa, site na 00 (enweghị) ruo FF (juputara), nke na-enye otu 16.7 nde agba dị ka RGB n'usoro mkpirisi. HEX bụ ndabara na CSS, ngwá ọrụ imewe na nduzi ika.
- Sintaksị:
- #RRGGBB
- Ókè:
- 00–FF per channel
- Kasị mma maka:
- CSS, nnyefe imewe, nduzi ika
Gịnị bụ HSL?
HSL kewapụtara agba n'ime hue (0–360° na igwe agba), saturation (ogologo agba, 0–100%) na lightness (oke ìhè, 0–100%). N'ihi na akụkụ ọ bụla dakọtara na otú mmadụ si kọwaa agba, HSL bụ usoro kacha mfe maka iwulite tints, shades na palettes dị mma — n'aka ma ọ bụ n'ime koodu.
- Sintaksị:
- hsl(H, S%, L%)
- Ókè:
- 0–360°, 0–100%, 0–100%
- Kasị mma maka:
- palettes, tints na shades, theming
HEX gaa HSL tebụl ntụaka
Agba CSS a na-ahụkarị, tọgharịrị site na HEX gaa HSL.
| Agba | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |