Выравнивание цвета и прозрачности

1. Теоретически
2. На практике (Пример 1)
3. На практике (пример 2)
4. Серый + инструмент преобразования непрозрачности
5. Заключительные заметки

Цвет и прозрачность обычно обрабатываются независимо. Выберите цвет и установите его непрозрачность (или альфа, если хотите). Достаточно просто. Но как именно связаны цвет и непрозрачность?

Для целей этого поста, давайте просто рассмотрим оттенки серого. С небольшим дополнительным усилием это обсуждение может быть экстраполировано на все цвета.

Теоретически

В цветовых режимах RGB и HEX для цифровых экранов доступно 256 возможных оттенков серого, включая черный и белый. Однако, ограничиваясь только настройкой непрозрачности черного на белом фоне, 256 оттенков уменьшается до 100, поскольку непрозрачность обычно представляется в виде целой процентной точки от 0% до 100%. Для справки, таблица, отображающая 100 оттенков серого на эквивалентную непрозрачность черного на белом фоне, прикреплена к конец этого поста ,

Учитывая белый фон и черное наложение с регулируемой непрозрачностью, вычисление выходного оттенка серого может показаться тривиальным. Например, 80% черного на белом равняется серому 255 * .80 = 204 или RGB (204, 204, 204). Однако все становится немного сложнее при работе с оттенками, отличными от белого фона и черного наложения. Соотношение цвета и прозрачности может быть обобщено следующим композитинга формула.

Target - это выходной серый цвет, background - базовый цвет, а overlay - это цвет, который нужно изменить, управляя его непрозрачностью.

На практике (Пример 1)

Скажем, у вас есть черный логотип RGB (0,0,0) на белом фоне RGB (255,255,255), и вы хотите сопоставить его с серым цветом RGB (204,204,204). Поскольку вы работаете с файлом изображения, простейший элемент управления, помимо редактирования изображения, - это изменение непрозрачности изображения.

Подставляя эти значения в приведенную выше формулу и решая проблему непрозрачности, получаем (204 - 255) / (0 - 255) = 0,2. Непрозрачность наложения черного изображения должна быть изменена на 20%, чтобы соответствовать целевому серому.

На практике (пример 2)

Несколько иной подход к этой технике объясняется тем, что черный логотип имеет белую окружающую заливку, и вы хотите установить это изображение в штучной упаковке на сером фоне. Поместите плоский черный цветовой блок позади изображения и уменьшите непрозрачность оверлейного изображения до 80% как (204 - 0) / (244 - 0) = 0,8.

Серый + инструмент преобразования непрозрачности

Инструмент ниже обобщает эти расчеты для всех оттенков серого. Укажите любые 3 значения, запрошенные для расчета оставшегося 4-го значения. Значения цвета должны быть целыми числами от 0 до 255. Непрозрачность должна быть от 0% до 100%.

Увидеть перо ilEcu Лансом ( @gutini ) на CodePen ,

Заключительные заметки

Важно учитывать, что округление влияет на эти вычисления. Теоретически, 99% черного на белом цвете соответствует цвету RGB (2,55, 2,55, 2,55), но округляется до RGB (3,3,3). Как правило, значения RGB округляются до ближайшего целого числа. (Теоретические расчеты, которые дают значения RGB ровно на половину, как у RGB (25.5, 25.5, 25.5), округлены в меньшую сторону.)

Из-за этого округления есть только 4 серых, которые могут быть точно приравнены к непрозрачности черного на белом, кроме самих черного и белого. Они выделены в таблице ниже синим цветом. Эти 4 серых цвета - # 333333, # 666666, # 999999, #CCCCCC - когда-то были широко известны как веб-безопасные цвета.

Большое спасибо Томми Маршалл за помощь в разработке инструмента конвертации. Источник доступно на Codepen ,

RGB HEX Непрозрачность ЧЕРНОГО на БЕЛОМ (0,0,0) # 000000 100% (3,3,3) # 303030 99% (5,5,5) # 505050 98% (8,8,8) # 808080 97 % (10,10,10) # 0A0A0A 96% (13,13,13) # 0D0D0D 95% (15,15,15) # 0F0F0F 94% (18,18,18) # 121212 93% (20,20, 20) # 141414 92% (23,23,23) # 171717 91% (25,25,25) # 191919 90% (28,28,28) # 1C1C1C 89% (31,31,31) # 1F1F1F 88% (33,33,33) # 212121 87% (36,36,36) # 242424 86% (38,38,38) # 262626 85% (41,41,41) # 292929 84% (43,43,43 ) # 2B2B2B 83% (46,46,46) # 2E2E2E 82% (48,48,48) # 303030 81% (51,51,51) # 333333 80% (54,54,54) # 363636 79% ( 56,56,56) # 383838 78% (59,59,59) # 3B3B3B 77% (61,61,61) # 3D3D3D 76% (64,64,64) # 404040 75% (66,66,66) # 424242 74% (69,69,69) # 454545 73% (71,71,71) # 474747 72% (74,74,74) # 4A4A4A 71% (76,76,76) # 4C4C4C 70% (79 , 79,79) # 4F4F4F 69% (82,82,82) # 525252 68% (84,84,84) # 545454 67% (87,87,87) # 575757 66% (89,89,89) # 595959 65% (92,92,92) # 5C5C5C 64% (94,94,94) # 5E5E5E 63% (97,97,97) # 616161 62% (99,99,99) # 636363 61% (102,102,102) # 666666 60% (105,105,105) # 696969 59% (107,107,107) # 6B6B6B 58% (110,110,110) # 6E6E6E 57% (112,112,112) # 707070 56% (115,115,115) # 737373 55% (117,111,117) # 757575 54% (120,120,120) # 787878 53% (122,122,122) # 7A7A7A 52% (125,125,125) # 7D7D7D 51% (127,127,127) # 7F7F7F 50% (130,130,130) # 828288 853 (138) 85% (138) 85% (138) 85% (138) 283 (%) 48% (135 135 135) # 878787 47% (138 138 138) # 8A8A8A 46% (140,140,140) # 8C8C8C 45% (143,143,143) # 8F8F8F 44% (145,145,145) # 919191 43% (148,148,148) # 9494996 50% (949499696) % (153 153 153) # 999999 40% (156 156 156) # 9C9C9C 39% (158 158 158) # 9E9E9E 38% (161 161 161) # A1A1A1 37% (163 163 163) # A3A3A3 36% (166 166 166 A6A8A6) A6A6 (166,166,166) A68A6 (186) 168 (A) A6A6 (166,166,166) A68A6 (166,166,166) A68A6 (163,166,166) A68A6 (163,166,166) A6A6) (%: (153, 153, 153) # 999999, 40% (156, 156, 156). (171 171 171) #ABABAB 33% (173 173 173) #ADADAD 32% (176 176 176) # B0B0B0 31% (178 178 178) # B2B2B2 30% (181 181 181) # B5B5B5 29% (184 184 184) # B8B8B8 2886 (18%) (188%) (186%) (186%) (186%) (186%) (186%) (186%) (186%) (18%) (18%) (18%) 189 189 189) #BDBDBD 2 6% (191 191 191) #BFBFBF 25% (194 194 194) # C2C2C2 24% (196 196 196) # C4C4C4 23% (199,199,199) # C7C7C7 22% (201,201,201) # C9C9C9 21% (204,204,204FC) #CC % (209,209,209) # D1D1D1 18% (212,212,212) # D4D4D4 17% (214,214,214) # D6D6D6 16% (217 217 217) # D9D9D9 15% (219 219 219) #DBDBDB 14% (222 222 222E2 223E0) 0% (222 222 222E) 22% (222) 224) 226 (227,227,227) # E3E3E3 11% (229,229,229) # E5E5E5 10% (232,232,232) # E8E8E8 9% (235,235,235) #EBEBEB 8% (237,237,237) #EDEDED 7% (240,240,240) # F0F0F2 6,22 (242) F2F2F242% (242F2F2F2F2F2F2F2F2F2F2F2F2F2F2F2%) 245 245 245) # F5F5F5 4% (247 247 247) # F7F7F7 3% (250 250 250) #FAFAFA 2% (252 252 252) #FCFCFC 1% (255 255 255) #FFFFFF 0%

Похожие

Комментарии