{"id":6705,"date":"2026-09-17T06:01:07","date_gmt":"2026-09-17T06:01:07","guid":{"rendered":"https:\/\/otus.ru\/journal\/?p=6705"},"modified":"2026-09-25T15:48:11","modified_gmt":"2026-09-25T15:48:11","slug":"oboznacheniya-cvetov-v-veb-dizajne","status":"publish","type":"post","link":"https:\/\/otus.ru\/journal\/oboznacheniya-cvetov-v-veb-dizajne\/","title":{"rendered":"\u041e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432 \u0432 \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0435: HEX, RGB, HSL \u0438 named"},"content":{"rendered":"

\u041e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430<\/strong> \u0432 \u0432\u0435\u0431\u0435 — \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0442\u0442\u0435\u043d\u043e\u043a \u0432 \u043a\u043e\u0434\u0435 \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0435\u0433\u043e \u043f\u043e\u043d\u044f\u043b. \u0412 CSS \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0446\u0432\u0435\u0442 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0440\u0430\u0432\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u044b\u043c\u0438 \u0437\u0430\u043f\u0438\u0441\u044f\u043c\u0438: \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u043e\u0439 (HEX), \u043f\u043e \u043a\u0430\u043d\u0430\u043b\u0430\u043c RGB, \u043f\u043e \u0442\u043e\u043d\u0443 \u0438 \u0441\u0432\u0435\u0442\u043b\u043e\u0442\u0435 HSL \u0438\u043b\u0438 \u043f\u043e \u0438\u043c\u0435\u043d\u0438. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043b\u044e\u0431\u0443\u044e \u0438\u0437 \u043d\u0438\u0445 \u043a \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u043c\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0438 \u0440\u0438\u0441\u0443\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u043f\u0438\u043a\u0441\u0435\u043b\u044c.<\/p>\n

\n

\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/strong><\/p>\n

    \n
  1. \u041a\u0430\u043a\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0446\u0432\u0435\u0442\u0430 \u0435\u0441\u0442\u044c \u0432 CSS<\/a><\/li>\n
  2. HEX: \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c<\/a><\/li>\n
  3. RGB \u0438 RGBA: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u043a\u0430\u043d\u0430\u043b\u0430\u043c<\/a><\/li>\n
  4. HSL: \u0442\u043e\u043d, \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u0441\u0432\u0435\u0442\u043b\u043e\u0442\u0430<\/a><\/li>\n
  5. \u0418\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430<\/a><\/li>\n
  6. \u041e\u0434\u0438\u043d \u0446\u0432\u0435\u0442 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0437\u0430\u043f\u0438\u0441\u044f\u0445<\/a><\/li>\n
  7. \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0446\u0432\u0435\u0442\u0430<\/a><\/li>\n
  8. \u041a\u0430\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u044c<\/a><\/li>\n
  9. \u0412\u044b\u0432\u043e\u0434\u044b<\/a><\/li>\n
  10. \u0413\u0434\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f<\/a><\/li>\n
  11. FAQ<\/a><\/li>\n<\/ol>\n<\/div>\n

    \u041d\u0438\u0436\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446: HEX \u0438 \u0435\u0433\u043e \u043a\u043e\u0440\u043e\u0442\u043a\u0443\u044e \u0444\u043e\u0440\u043c\u0443, RGB \u0438 RGBA, HSL, \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432\u0440\u043e\u0434\u0435 oklch. \u041f\u043e\u043a\u0430\u0436\u0435\u043c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0446\u0432\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u0444\u043e\u0440\u043c\u0430\u0445 \u0438 \u043f\u0440\u043e\u0433\u043e\u043d\u0438\u043c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044e \u043a\u043e\u0434\u043e\u043c \u0441 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u044b\u0432\u043e\u0434\u043e\u043c.<\/p>\n

    \u041a\u0430\u043a\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0446\u0432\u0435\u0442\u0430 \u0435\u0441\u0442\u044c \u0432 CSS<\/h2>\n

    \u0412\u0441\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0438\u0436\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c\u044b: \u0433\u0434\u0435 \u0432 CSS \u0436\u0434\u0443\u0442 \u0446\u0432\u0435\u0442 (color<\/code>, background<\/code>, border<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430), \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c. \u0420\u0430\u0437\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e\u043c \u0434\u043b\u044f \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0430 \u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0435\u043c \u0430\u043b\u044c\u0444\u0430-\u043a\u0430\u043d\u0430\u043b\u0430 (\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438).<\/p>\n\n\n\n\n\n\n\n\n\n\n
    \u0417\u0430\u043f\u0438\u0441\u044c<\/th>\n\u041f\u0440\u0438\u043c\u0435\u0440<\/th>\n\u0410\u043b\u044c\u0444\u0430<\/th>\n\u0427\u0435\u043c \u0443\u0434\u043e\u0431\u043d\u0430<\/th>\n<\/tr>\n<\/thead>\n
    HEX<\/td>\n#17A2B8<\/code><\/td>\n#RRGGBBAA<\/code><\/td>\n\u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0430, \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u0430, \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432<\/td>\n<\/tr>\n
    RGB \/ RGBA<\/td>\nrgb(23 162 184)<\/code><\/td>\n\u0434\u0430, \u0447\u0435\u0440\u0435\u0437 \/<\/code><\/td>\n\u043f\u043e\u043d\u044f\u0442\u043d\u044b \u043a\u0430\u043d\u0430\u043b\u044b, \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e<\/td>\n<\/tr>\n
    HSL \/ HSLA<\/td>\nhsl(188 78% 41%)<\/code><\/td>\n\u0434\u0430, \u0447\u0435\u0440\u0435\u0437 \/<\/code><\/td>\n\u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043e\u0442\u0442\u0435\u043d\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u043e\u043d\u0430<\/td>\n<\/tr>\n
    \u0418\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435<\/td>\nteal<\/code>, red<\/code><\/td>\n\u043d\u0435\u0442<\/td>\n\u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432<\/td>\n<\/tr>\n
    \u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430<\/td>\ntransparent<\/code>, currentColor<\/code><\/td>\n—<\/td>\n\u043e\u0441\u043e\u0431\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438<\/td>\n<\/tr>\n
    \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/td>\noklch(60% 0.1 200)<\/code><\/td>\n\u0434\u0430<\/td>\n\u0440\u043e\u0432\u043d\u044b\u0435 \u043f\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044e \u043f\u0430\u043b\u0438\u0442\u0440\u044b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u043c \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n

    HEX: \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c<\/h2>\n

    HEX-\u043a\u043e\u0434<\/strong> \u0437\u0430\u0434\u0430\u0435\u0442 \u0446\u0432\u0435\u0442 \u0442\u0440\u0435\u043c\u044f \u043f\u0430\u0440\u0430\u043c\u0438 \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u044b\u0445 \u0446\u0438\u0444\u0440 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043a\u0440\u0430\u0441\u043d\u044b\u0439-\u0437\u0435\u043b\u0435\u043d\u044b\u0439-\u0441\u0438\u043d\u0438\u0439: #RRGGBB<\/code>. \u041a\u0430\u0436\u0434\u0430\u044f \u043f\u0430\u0440\u0430 — \u044d\u0442\u043e \u0431\u0430\u0439\u0442 \u043e\u0442 00<\/code> \u0434\u043e FF<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u043d\u0430\u043b\u0430 \u043e\u0442 0 \u0434\u043e 255 \u0432 \u0434\u0435\u0441\u044f\u0442\u0438\u0447\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u0426\u0438\u0444\u0440\u044b 10-15 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u0431\u0443\u043a\u0432\u0430\u043c\u0438 A-F, \u0440\u0435\u0433\u0438\u0441\u0442\u0440 \u043d\u0435 \u0432\u0430\u0436\u0435\u043d: #FF7A00<\/code> \u0438 #ff7a00<\/code> — \u043e\u0434\u0438\u043d \u0446\u0432\u0435\u0442.<\/p>\n

    \u041a\u0440\u0430\u0439\u043d\u0438\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u043b\u0435\u0433\u043a\u043e: #000000<\/code> — \u0447\u0435\u0440\u043d\u044b\u0439 (\u0432\u0441\u0435 \u043a\u0430\u043d\u0430\u043b\u044b \u0432 \u043d\u0443\u043b\u0435), #FFFFFF<\/code> — \u0431\u0435\u043b\u044b\u0439 (\u0432\u0441\u0435 \u0432 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0435), #FF0000<\/code> — \u0447\u0438\u0441\u0442\u044b\u0439 \u043a\u0440\u0430\u0441\u043d\u044b\u0439.<\/p>\n

    \u0415\u0441\u0442\u044c \u043a\u043e\u0440\u043e\u0442\u043a\u0430\u044f \u0444\u043e\u0440\u043c\u0430 #RGB<\/code> \u0438\u0437 \u0442\u0440\u0435\u0445 \u0446\u0438\u0444\u0440: \u043a\u0430\u0436\u0434\u0430\u044f \u0446\u0438\u0444\u0440\u0430 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f. \u0422\u0430\u043a #F2A<\/code> \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 #FF22AA<\/code>, \u0430 #0AF<\/code> — \u0432 #00AAFF<\/code>. \u041a\u043e\u0440\u043e\u0442\u043a\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0446\u0432\u0435\u0442\u0430, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0430\u0440\u044b \u0441\u043e\u0441\u0442\u043e\u044f\u0442 \u0438\u0437 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0446\u0438\u0444\u0440, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 #17A2B8<\/code> \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f.<\/p>\n

    \u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0447\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0439 \u043f\u0430\u0440\u043e\u0439 — #RRGGBBAA<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, #FF000080<\/code> — \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 50% \u043d\u0435\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 (80<\/code> \u0432 \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u043e\u0439 \u044d\u0442\u043e 128 \u0438\u0437 255). \u0415\u0441\u0442\u044c \u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0441 \u0430\u043b\u044c\u0444\u043e\u0439 — #RGBA<\/code>, \u0433\u0434\u0435 #F008<\/code> \u0440\u0430\u0432\u043d\u043e\u0437\u043d\u0430\u0447\u043d\u043e #FF000088<\/code>. \u0412\u043e\u0441\u044c\u043c\u0438\u0437\u043d\u0430\u0447\u043d\u044b\u0439 HEX \u043f\u043e\u043d\u0438\u043c\u0430\u044e\u0442 \u0432\u0441\u0435 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b.<\/p>\n

    RGB \u0438 RGBA: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u043a\u0430\u043d\u0430\u043b\u0430\u043c<\/h2>\n

    \u0417\u0430\u043f\u0438\u0441\u044c rgb()<\/code> \u0437\u0430\u0434\u0430\u0435\u0442 \u0442\u0435 \u0436\u0435 \u0442\u0440\u0438 \u043a\u0430\u043d\u0430\u043b\u0430 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0447\u0438\u0441\u043b\u0430\u043c\u0438 \u043e\u0442 0 \u0434\u043e 255: rgb(255 122 0)<\/code>. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0446\u0432\u0435\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u0434\u0435 — \u043a\u0430\u043d\u0430\u043b\u0430\u043c\u0438 \u043f\u0440\u043e\u0449\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u043a\u043e\u0439, \u0447\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u043e\u0439 HEX.<\/p>\n

    \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 CSS \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u043d\u0430\u043b\u044b \u043f\u0440\u043e\u0431\u0435\u043b\u0430\u043c\u0438, \u0430 \u0430\u043b\u044c\u0444\u0443 \u043f\u0438\u0448\u0435\u0442 \u043f\u043e\u0441\u043b\u0435 \u0441\u043b\u044d\u0448\u0430: rgb(255 0 0 \/ 50%)<\/code> \u0438\u043b\u0438 rgb(255 0 0 \/ 0.5)<\/code>. \u0421\u0442\u0430\u0440\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0441 \u0437\u0430\u043f\u044f\u0442\u044b\u043c\u0438 \u0442\u043e\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442: rgba(255, 0, 0, 0.5)<\/code>. \u0421\u0435\u0433\u043e\u0434\u043d\u044f rgb()<\/code> \u0438 rgba()<\/code> — \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u044b, \u043e\u0431\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0430\u043b\u044c\u0444\u0443, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f rgba()<\/code> \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0434\u043b\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438.<\/p>\n

    \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u043d\u0430\u043b\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u0438 \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445: rgb(100% 0% 0%)<\/code> \u044d\u0442\u043e \u0442\u043e\u0442 \u0436\u0435 \u043a\u0440\u0430\u0441\u043d\u044b\u0439, \u0447\u0442\u043e rgb(255 0 0)<\/code>.<\/p>\n

    HSL: \u0442\u043e\u043d, \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u0441\u0432\u0435\u0442\u043b\u043e\u0442\u0430<\/h2>\n

    HSL<\/strong> \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0446\u0432\u0435\u0442 \u0442\u0440\u0435\u043c\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0443 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438: \u0442\u043e\u043d (hue) — \u0443\u0433\u043e\u043b \u043d\u0430 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u043c \u043a\u0440\u0443\u0433\u0435 \u043e\u0442 0 \u0434\u043e 360 \u0433\u0440\u0430\u0434\u0443\u0441\u043e\u0432, \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c (saturation) \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445 \u0438 \u0441\u0432\u0435\u0442\u043b\u043e\u0442\u0430 (lightness) \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445. \u041a\u0440\u0430\u0441\u043d\u044b\u0439 — \u044d\u0442\u043e hsl(0 100% 50%)<\/code>, \u0437\u0435\u043b\u0435\u043d\u044b\u0439 — hsl(120 100% 50%)<\/code>, \u0441\u0438\u043d\u0438\u0439 — hsl(240 100% 50%)<\/code>.<\/p>\n

    \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e HSL — \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430. \u041c\u0435\u043d\u044f\u0435\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u0435\u0442\u043b\u043e\u0442\u0443, \u0438 \u0442\u043e\u043d \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043c \u0436\u0435: hsl(210 90% 30%)<\/code> \u0442\u0435\u043c\u043d\u0435\u0435, \u0430 hsl(210 90% 70%)<\/code> \u0441\u0432\u0435\u0442\u043b\u0435\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u0441\u0438\u043d\u0435\u0433\u043e. \u0412 HEX \u0438\u043b\u0438 RGB \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e \u0431\u044b \u043f\u0435\u0440\u0435\u0441\u0447\u0435\u0442\u0430 \u0432\u0441\u0435\u0445 \u043a\u0430\u043d\u0430\u043b\u043e\u0432.<\/p>\n

    \u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0432 RGB: hsl(210 90% 50% \/ 0.4)<\/code>. \u0424\u0443\u043d\u043a\u0446\u0438\u044f hsla()<\/code> \u043e\u0441\u0442\u0430\u043b\u0430\u0441\u044c \u0441\u0438\u043d\u043e\u043d\u0438\u043c\u043e\u043c hsl()<\/code>.<\/p>\n

    \u041d\u0435 \u043f\u0443\u0442\u0430\u0439\u0442\u0435 HSL \u0441 HSV (\u043e\u043d \u0436\u0435 HSB) \u0438\u0437 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432. \u0423 \u043d\u0438\u0445 \u0442\u0440\u0435\u0442\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0440\u0430\u0437\u043d\u044b\u0439: \u0432 HSL \u044d\u0442\u043e \u0441\u0432\u0435\u0442\u043b\u043e\u0442\u0430 (0% \u0432\u0441\u0435\u0433\u0434\u0430 \u0447\u0435\u0440\u043d\u044b\u0439, 100% \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0435\u043b\u044b\u0439), \u0430 \u0432 HSV\/HSB — \u044f\u0440\u043a\u043e\u0441\u0442\u044c (value\/brightness), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0447\u0438\u0441\u043b\u0430 \u0432 Photoshop \u0438 \u0432 CSS \u0434\u0430\u0434\u0443\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430. \u0412 CSS \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0438\u043c\u0435\u043d\u043d\u043e HSL.<\/p>\n

    \u0418\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0441\u043b\u043e\u0432\u0430<\/h2>\n

    CSS \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c: red<\/code>, green<\/code>, blue<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u044d\u043a\u0437\u043e\u0442\u0438\u043a\u0443 \u0432\u0440\u043e\u0434\u0435 coral<\/code>, khaki<\/code>, chocolate<\/code>, teal<\/code>. \u0412\u0441\u0435\u0433\u043e \u0442\u0430\u043a\u0438\u0445 \u0438\u043c\u0435\u043d \u043e\u043a\u043e\u043b\u043e 148. \u0418\u043c\u0435\u043d\u0430 \u0447\u0438\u0442\u0430\u0435\u043c\u044b, \u043d\u043e \u0438\u0445 \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0438 \u0442\u043e\u0447\u043d\u044b\u0439 \u043e\u0442\u0442\u0435\u043d\u043e\u043a \u043f\u043e\u0434 \u043c\u0430\u043a\u0435\u0442 \u0438\u043c\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u043f\u043e\u0434\u043e\u0431\u0440\u0430\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435 \u0447\u0430\u0449\u0435 \u0431\u0435\u0440\u0443\u0442 HEX \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435.<\/p>\n

    \u0423 \u0438\u043c\u0435\u043d \u0435\u0441\u0442\u044c \u043c\u0438\u043d\u0443\u0441\u044b: \u0438\u0445 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043f\u043e-\u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0438, \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430 \u043c\u043e\u043b\u0447\u0430 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f (\u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442 \u0446\u0432\u0435\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u043b\u0438 \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u043d\u044b\u0439), \u0430 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0442\u044c \u0438\u043c\u044f \u043d\u0435\u043b\u044c\u0437\u044f. \u0414\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u043e\u043d\u0438 \u0443\u0434\u043e\u0431\u043d\u044b, \u0434\u043b\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u043e\u0439 \u043f\u0430\u043b\u0438\u0442\u0440\u044b — \u043d\u0435\u0442.<\/p>\n

    \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u043e\u044f\u0442 \u0434\u0432\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0441\u043b\u043e\u0432\u0430. transparent<\/code> — \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 (\u0440\u0430\u0432\u043d\u043e\u0437\u043d\u0430\u0447\u0435\u043d rgb(0 0 0 \/ 0)<\/code>). currentColor<\/code> \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 color<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 — \u0443\u0434\u043e\u0431\u043d\u043e, \u0447\u0442\u043e\u0431\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u043c\u043a\u0430 \u0438\u043b\u0438 \u0438\u043a\u043e\u043d\u043a\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u043b\u0438 \u0441 \u0446\u0432\u0435\u0442\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n

    \u041e\u0434\u0438\u043d \u0446\u0432\u0435\u0442 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0437\u0430\u043f\u0438\u0441\u044f\u0445<\/h2>\n

    \u0417\u0430\u043f\u0438\u0441\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c\u044b, \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0443\u043c\u0435\u0442\u044c \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438. \u0427\u0438\u0441\u0442\u044b\u0439 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a \u0432\u043e \u0432\u0441\u0435\u0445 \u0444\u043e\u0440\u043c\u0430\u0445: #F00<\/code> = #FF0000<\/code> = rgb(255 0 0)<\/code> = hsl(0 100% 50%)<\/code> = red<\/code>. \u0426\u0435\u043f\u043e\u0447\u043a\u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u043d\u0430: HEX \u043f\u0430\u0440\u0430 -> \u0447\u0438\u0441\u043b\u043e \u043a\u0430\u043d\u0430\u043b\u0430 0-255 -> \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u0442\u043e\u043d\/\u0441\u0432\u0435\u0442\u043b\u043e\u0442\u0430 HSL.<\/p>\n

    \u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u044d\u0442\u043e \u043a\u043e\u0434\u043e\u043c. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 HEX, \u0447\u0438\u0442\u0430\u0435\u0442 \u043a\u0430\u043d\u0430\u043b\u044b \u0438 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0438\u0445 \u0432 HSL (\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c colorsys<\/code> \u0432 Python \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a HLS, \u0443\u0447\u0442\u0435\u043c \u044d\u0442\u043e):<\/p>\n

    import<\/span> <\/span>colorsys<\/span>\n\ndef<\/span> <\/span>hex_to_rgb<\/span>(<\/span>h<\/span>):<\/span>\n    h<\/span> =<\/span> h<\/span>.<\/span>lstrip<\/span>(<\/span>'#'<\/span>)<\/span>\n    if<\/span> len<\/span>(<\/span>h<\/span>)<\/span> ==<\/span> 3<\/span>:<\/span>                       # \u043a\u043e\u0440\u043e\u0442\u043a\u0430\u044f \u0444\u043e\u0440\u043c\u0430 #RGB -> #RRGGBB<\/span>\n        h<\/span> =<\/span> ''<\/span>.<\/span>join<\/span>(<\/span>c<\/span> *<\/span> 2<\/span> for<\/span> c<\/span> in<\/span> h<\/span>)<\/span>\n    r<\/span>,<\/span> g<\/span>,<\/span> b<\/span> =<\/span> (<\/span>int<\/span>(<\/span>h<\/span>[<\/span>i<\/span>:<\/span>i<\/span>+<\/span>2<\/span>],<\/span> 16<\/span>)<\/span> for<\/span> i<\/span> in<\/span> (<\/span>0<\/span>,<\/span> 2<\/span>,<\/span> 4<\/span>))<\/span>\n    return<\/span> r<\/span>,<\/span> g<\/span>,<\/span> b<\/span>\n\ndef<\/span> <\/span>rgb_to_hsl<\/span>(<\/span>r<\/span>,<\/span> g<\/span>,<\/span> b<\/span>):<\/span>\n    h<\/span>,<\/span> l<\/span>,<\/span> s<\/span> =<\/span> colorsys<\/span>.<\/span>rgb_to_hls<\/span>(<\/span>r<\/span> \/<\/span> 255<\/span>,<\/span> g<\/span> \/<\/span> 255<\/span>,<\/span> b<\/span> \/<\/span> 255<\/span>)<\/span>   # colorsys: \u043f\u043e\u0440\u044f\u0434\u043e\u043a HLS<\/span>\n    return<\/span> round<\/span>(<\/span>h<\/span> *<\/span> 360<\/span>),<\/span> round<\/span>(<\/span>s<\/span> *<\/span> 100<\/span>),<\/span> round<\/span>(<\/span>l<\/span> *<\/span> 100<\/span>)<\/span>\n\npalette<\/span> =<\/span> [<\/span>\n    (<\/span>\"\u043a\u0440\u0430\u0441\u043d\u044b\u0439\"<\/span>,<\/span>   \"#F00\"<\/span>),<\/span>\n    (<\/span>\"\u043e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u0439\"<\/span>,<\/span> \"#FF7A00\"<\/span>),<\/span>\n    (<\/span>\"\u0431\u0438\u0440\u044e\u0437\u043e\u0432\u044b\u0439\"<\/span>,<\/span> \"#17A2B8\"<\/span>),<\/span>\n]<\/span>\n\nfor<\/span> name<\/span>,<\/span> code<\/span> in<\/span> palette<\/span>:<\/span>\n    r<\/span>,<\/span> g<\/span>,<\/span> b<\/span> =<\/span> hex_to_rgb<\/span>(<\/span>code<\/span>)<\/span>\n    h<\/span>,<\/span> s<\/span>,<\/span> l<\/span> =<\/span> rgb_to_hsl<\/span>(<\/span>r<\/span>,<\/span> g<\/span>,<\/span> b<\/span>)<\/span>\n    print<\/span>(<\/span>f\"{<\/span>name<\/span>}: {<\/span>code<\/span>} -> rgb({<\/span>r<\/span>}, {<\/span>g<\/span>}, {<\/span>b<\/span>}) -> hsl({<\/span>h<\/span>}, {<\/span>s<\/span>}%, {<\/span>l<\/span>}%)\"<\/span>)<\/span><\/code><\/pre>\n
    \u0412\u044b\u0432\u043e\u0434 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b:<\/p>\n
    \u043a\u0440\u0430\u0441\u043d\u044b\u0439: #F00 -> rgb(255, 0, 0) -> hsl(0, 100%, 50%)\n\u043e\u0440\u0430\u043d\u0436\u0435\u0432\u044b\u0439: #FF7A00 -> rgb(255, 122, 0) -> hsl(29, 100%, 50%)\n\u0431\u0438\u0440\u044e\u0437\u043e\u0432\u044b\u0439: #17A2B8 -> rgb(23, 162, 184) -> hsl(188, 78%, 41%)\n<\/code><\/pre>\n
    \u0412\u0438\u0434\u043d\u043e, \u043a\u0430\u043a #F00<\/code> \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 rgb(255, 0, 0)<\/code>, \u0430 \u0442\u043e\u0442 \u0436\u0435 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0432 HSL — \u044d\u0442\u043e hsl(0, 100%, 50%)<\/code>. \u0412\u0440\u0443\u0447\u043d\u0443\u044e \u044d\u0442\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u044e\u0442 \u043f\u0430\u043b\u0438\u0442\u0440\u0430 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0432\u044b\u0431\u043e\u0440\u0430 \u0446\u0432\u0435\u0442\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 (DevTools) \u0438\u043b\u0438 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u044b.<\/p>\n
    \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0437\u0430\u043f\u0438\u0441\u0438 \u0446\u0432\u0435\u0442\u0430<\/h2>\n
    CSS Color 4 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0437\u0430\u043f\u0438\u0441\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0440\u043e\u0432\u043d\u0435\u0435 \u043f\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044e. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 — hwb()<\/code> (\u0442\u043e\u043d-\u0431\u0435\u043b\u0438\u0437\u043d\u0430-\u0447\u0435\u0440\u043d\u043e\u0442\u0430), \u0430 \u0442\u0430\u043a\u0436\u0435 oklch()<\/code> \u0438 oklab()<\/code>. \u0418\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0440\u0430\u0432\u043d\u044b\u0435 \u0448\u0430\u0433\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0434\u0430\u044e\u0442 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0435 \u043d\u0430 \u0433\u043b\u0430\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430, \u0447\u0435\u0433\u043e \u043d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u044e\u0442 HSL \u0438 RGB. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043f\u0430\u043b\u0438\u0442\u0440 \u0438 \u043f\u043b\u0430\u0432\u043d\u044b\u0445 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432.<\/p>\n
    \u041f\u0440\u0438\u043c\u0435\u0440: oklch(60% 0.15 200)<\/code> \u0437\u0430\u0434\u0430\u0435\u0442 \u0446\u0432\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u0435\u0442\u043b\u043e\u0442\u0443, \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c (chroma) \u0438 \u0442\u043e\u043d. \u042d\u0442\u0438 \u0437\u0430\u043f\u0438\u0441\u0438, \u0430 \u0442\u0430\u043a\u0436\u0435 lab()<\/code>, lch()<\/code> \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f color()<\/code> \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0448\u0438\u0440\u043e\u043a\u043e\u0433\u043e \u043e\u0445\u0432\u0430\u0442\u0430 P3) \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u043d\u044b \u0432 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u0422\u043e\u0447\u043d\u044b\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u0438 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u0434\u043e\u043b\u0438 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.<\/p>\n
    \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0442\u0435\u0440\u043c\u0438\u043d \u00ab\u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0432\u0435\u0431-\u0446\u0432\u0435\u0442\u0430\u00bb (web-safe): \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0438\u0437 216 \u043e\u0442\u0442\u0435\u043d\u043a\u043e\u0432, \u0433\u0434\u0435 \u043a\u0430\u043d\u0430\u043b\u044b \u043a\u0440\u0430\u0442\u043d\u044b \u0448\u0430\u0433\u0430\u043c 00 33 66 99 CC FF<\/code>. \u041e\u043d \u0431\u044b\u043b \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0434\u0438\u0441\u043f\u043b\u0435\u0435\u0432 1990-\u0445 \u0441 \u043f\u0430\u043b\u0438\u0442\u0440\u043e\u0439 \u0432 256 \u0446\u0432\u0435\u0442\u043e\u0432. \u041d\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0441 24-\u0431\u0438\u0442\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043d\u0435\u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e, \u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u0445 216 \u0446\u0432\u0435\u0442\u043e\u0432 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n
    \u041a\u0430\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u044c<\/h2>\n
    \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u043f\u0438\u0441\u0438 \u043d\u0435\u0442 — \u0432\u044b\u0431\u043e\u0440 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0437\u0430\u0434\u0430\u0447\u0438. \u041e\u0440\u0438\u0435\u043d\u0442\u0438\u0440 \u0442\u0430\u043a\u043e\u0439:<\/p>\n