html & css colors

1. HTML & CSS
Colors
БОЯН ИВАНОВ

2. Color Wheel –
Цветно Колело
2

3. Цветове в CSS
Най – често използваните начини за дефиниране на
цветове в CSS, биват :
 Валидно име за цвят на английски език, примерно
“red” за червено, “blue” за синьо и тнт.
 Стойността в RGB (red, green, blue), примерно
“rgb(255, 0, 0);” за червено.
 Шестнадесетичната стойност на цвета (HEX), като
#FF0000 за червено, #0000FF за синьо и тнт.
3

4. Цветове в CSS
Още начини за дефиниране на цветове.
 RGBA, RGB стойност с прозрачност, примерно
“rgba(255, 0, 0, 0.5)”, за 50% прозрачност.
 HSL(Hue (Отенък), Saturation (наситеност),
Lightness (светлина)), примерно “hsl(0, 100, 50)” за
наситено червено.
 HSLA, по същия принцип като rgba, hsl модела с
ниво на прозрачност, примерно “hslа(0,
100, 50, 0.5 )”, за 50% прозрачност.
4

5. Стойности на RGB
 Red : 0 – 255 / 00 – FF;
 Green: 0 – 255/ 00 - FF;
 Blue: 0 – 255 / 00 – FF;
 Total: 256*256*256 = 16777216 colors;
 Opacity : 0 – 1;
rgba(255, 0, 0, 0.3);
 Web safe colors:
00 / 33 / 66 / 99 / CC / FF
Total: 216 colors;
5

6. HSL цветове 6

7. HSL калкулатор 7

8. HSL Стойности
 Ηue (Отенък) : е градус от колелото на цветовете,
от 0 до 360, 0 за червено, 120 зелено и 240 синьо.
 Saturation (наситеност) : Започва от 0 и стига до
100%. 0% е нюанс на сиво и 100% е пълният цвят.
 Lightness (светлина) : Процентна стойност, 0 за
черно,100% за бяло.
 Примерни цветове :
hsl(120, 100%, 50%); /* green */
hsl(120, 100%, 75%); /* light green */ hsl(120,
100%, 25%); /* dark green */ hsl(120, 60%,
70%); /* pastel green */
8

9. Благодаря Ви за
вниманието.
Въпроси?