RGB sọ fún mànà bí ó ṣe yẹ kí ó tan ìmọ́lẹ̀; HSL sọ ohun tí awọ náà rí gan-an. Yiyipada awọn ikanni mẹ́ta sí hue, saturation àti lightness mú ki awọ rọrùn lati ṣatunṣe ní ọwọ́.
Bá a ṣe ń yipada RGB sí HSL
- Pin R, G àti B nipasẹ 255 kí iye kọọkan lè wà láàárin 0 àti 1.
- Mu iye tó pọ̀ jùlọ àti iye tó kere jùlọ nínú mẹ́ta — apapọ wọn ni ìtanràn L.
- Tí iye tó pọ̀ jùlọ àti iye tó kere jùlọ bá dọ́gba, awọ náà jẹ́ grẹ́yì: hue àti saturation mejeji jẹ́ 0.
- Bí kò ṣe bẹ́ẹ̀, fa S láti iyatọ láàárin iye tó pọ̀ jùlọ àti ti kere jùlọ, kí o sì ka H lára ikanni tí ó pọ̀ jùlọ.
Àpẹẹrẹ tó ṣiṣẹ
Gangan ní ìlànà. Nítorí pé H, S àti L maa n farahàn gẹ́gẹ́ bí àwọn iye tí a yíkká sí awọn nọmba pipe, yiyipada padà lè yí ikanni kan ní ìyíkan tàbí meji.
RGB ati HSL ṣàlàyé
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()
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
Tábìlì ìtọ́kasí RGB sí HSL
Àwọn awọ CSS tí ó wọ́pọ̀ jùlọ, tí a yí láti RGB sí HSL.
| Awọ | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |