HSL jẹ ọna ore lati yan awọ, RGB ni awọn iboju, APIs canvas ati koodu image nlo nitootọ. Oluyipada yii yipada eyikeyi hue, saturation ati lightness si awọn ikanni 0–255 gangan.
Bá a ṣe ń yipada HSL sí RGB
- Yi S ati L pada si awọn ipin ati ṣe iṣiro chroma C = (1 − |2L − 1|) × S.
- Pin hue nipasẹ 60 lati wa apakan rẹ lori kẹkẹ awọ ki o si ṣe iṣiro iye arin X = C × (1 − |(H/60 mod 2) − 1|).
- Yàn C, X ati 0 si awọn iho R, G ati B gẹgẹ bi apakan yẹn.
- Fi aropin lightness L − C/2 kun gbogbo awọn ikanni mẹta ki o si pọ si 255.
Àpẹẹrẹ tó ṣiṣẹ
Abajade jẹ gangan titi di ayipo ikẹhin si awọn ikanni patapata. Awọn iye hue tabi saturation ti o ni onigun kìkọ ni a ṣe atilẹyin ati pe wọn maa de lori triple RGB to sunmọ julọ.
HSL ati RGB ṣàlàyé
Kí ni HSL?
HSL pin awọ si hue (0–360° lori kẹkẹ awọ), saturation (bawo ni awọ, 0–100%) ati lightness (bawo ni didan, 0–100%). Nitori apakan kọọkan ba ọna ti eniyan ṣe n ṣapejuwe awọ mu, HSL jẹ ọna kika ti o rọọrun julọ fun kikọ tints, shades ati paleti to ni ibamu — pẹlu ọwọ tabi ninu koodu.
- Sínatìsí:
- hsl(H, S%, L%)
- Ibiti:
- 0–360°, 0–100%, 0–100%
- Tó dára jùlọ fún:
- awọn paleti, tints ati shades, theming
Kí ni RGB?
RGB ṣapejuwe awọ gẹgẹbi awọn ikanni ina mẹta — pupa, alawọ ati buluu — ọkọọkan lati 0 si 255. O ṣe afihan bi awọn iboju ṣe n ṣiṣẹ gangan: gbogbo mẹta ni 255 funfun ni, gbogbo ni 0 funfun dudu. RGB jẹ yiyan to tọ nigbakugba ti o nilo lati ṣe iṣiro pẹlu awọ, ati rgba() ṣafikun ifaragba siwaju sii.
- Sínatìsí:
- rgb(R, G, B)
- Ibiti:
- 0–255 fun ikanni kọọkan
- Tó dára jùlọ fún:
- koodu, canvas, ifaragba pẹlu rgba()
Tábìlì ìtọ́kasí HSL sí RGB
Àwọn awọ CSS tí ó wọ́pọ̀ jùlọ, tí a yí láti HSL sí RGB.
| Awọ | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |