Боје

Боје су један од најважнијих визуелних елемената у дизајну интерфејса. Оне не утичу само на естетику интерфејса, већ имају и функционалну улогу - усмеравају пажњу корисника, истичу важне елементе интерфејса, дефинишу хијерархију садржаја, преносе емоционалну поруку бренда и граде његов идентитет. Да би дизајнер умео да користи боје на прави начин, потребно је да разуме како боје настају, како се комбинују и како се приказују на различитим уређајима.

У природи, боје настају као резултат мешања светлости различитих таласних дужина. У уметности се традиционално говори о примарним бојама (црвеној, жутој и плавој), из којих се мешањем добијају све остале боје. Мешањем две примарне боје добијају се секундарне боје (наранџаста, зелена и љубичаста), а комбинацијом примарних и секундарних добијају се терцијарне боје. Ова класификација је корисна за разумевање основних принципа колорита, али у UI дизајну примењују се други модели.

Основни појмови о бојама

У рачунарским системима најважнији је RGB модел (Red, Green, Blue), који се користи на екранима тј. мониторима и дисплејима мобилних уређаја. RGB модел се заснива на адитивном мешању боја светлости. То значи да се боје добијају додавањем светлости три основне компоненте: црвене, зелене и плаве. Када се све три компоненте прикажу у пуној јачини, добија се бела боја, а када су све искључене, приказује се црна.

У RGB моделу свака од три компоненте представља се једним бајтом, односно са 8 бита. Пошто једним бајтом може да се представи 256 различитих вредности (од 0 до 255), значи да црвена компонента има 256 могућих интензитета, зелена такође 256, и плава 256. Комбинацијом три компоненте, укупан број могућих боја износи 256 × 256 × 256 = 16.777.216 боја - више од 16 милиона боја! Зато се често каже да је једна боја у RGB систему представљена са 24 бита (8 бита × 3 компоненте), па се овај начин приказа назива 24-битна боја (true color).

Неке од основних RGB комбинација су:

црна = (0, 0, 0)
бела = (255, 255, 255)
црвена = (255, 0, 0)
зелена = (0, 255, 0)
плава = (0, 0, 255)
сива = (128, 128, 128)
жута = (255, 255, 0)
цијан (плавозелена) = (0, 255, 255)
магента (ружичасто-љубичаста) = (255, 0, 255)

Ови примери показују да мешањем две примарне боје у RGB систему настају секундарне боје, нпр. црвена + зелена = жута. Значи, у дигиталном окружењу примарне боје су црвена, зелена и плава, а не црвена, жута и плава као у традиционалном сликарству. Управо због тога што RGB модел одговара начину на који светлост функционише, он је основа за све што видимо на екранима.

Некада се у дизајну или програмирању додаје и четврта компонента — алфа канал (A), којом се одређује провидност боје. Тада свака боја има 4 бајта (по 8 бита за R, G, B и A), па се оваква боја назива 32-битна боја.

У савременим апликацијама и веб дизајну често се користе и HSL (Hue, Saturation, Lightness) и HSV (Hue, Saturation, Value) модели, јер омогућавају интуитивније подешавање боја. Уместо да се ради са три нумеричке вредности као у RGB систему, HSL модел омогућава да се подешава:

Hue тј. нијанса која представља положај боје у кругу од 0° до 360°, где је 0° црвена, 120° зелена и 240° плава боја, а остале боје се налазе између ових тачака,
Saturation тј. засићеност која описује интензитет боје, од сиве 0%, до пуне боје 100%,
Lightness тј. осветљеност која означава колико је боја светла или тамна, од црне 0%, преко нормалне боје 50% до беле 100%.

Поред RGB модела, у дизајну се користе и други модели боја. CMYK модел (Cyan, Magenta, Yellow, Key/Black) користи се у штампи и заснива се на субтрактивном мешању боја, где се светлост одузима (апсорбује) од беле позадине. За разлику од RGB-а који почиње од црне и додаје светлост, CMYK почиње од беле и одузима боје да би се добиле тамније нијансе. Зато је RGB модел погодан за екране, а CMYK за материјале који се штампају.

Навођење боја

У UI дизајну боје можеш наводити на више начина. Нпр. у веб дизајну боје можеш наводити по називу тј. по CSS типу података <named-color>, где постоји 16 стандардних боја и још око додатних 150 назива. На пример:

body {
    background-color: lightblue;
}
h1 {
    color: navy;
}
p {
    color: darkred;
}

Стандардне <named-color> вредности су:

`black`	`maroon`	`green`	`navy`
`silver`	`red`	`lime`	`blue`
`gray`	`purple`	`olive`	`teal`
`white`	`fuchsia`	`yellow`	`aqua`

Додатне <named-color> вредности су:

`aliceblue`	`antiquewhite`	`aquamarine`	`azure`
`beige`	`bisque`	`blanchedalmond`	`blueviolet`
`brown`	`burlywood`	`cadetblue`	`chartreuse`
`chocolate`	`coral`	`cornflowerblue`	`cornsilk`
`crimson`	`cyan`	`darkblue`	`darkcyan`
`darkgoldenrod`	`darkgray`	`darkgreen`	`darkgrey`
`darkkhaki`	`darkmagenta`	`darkolivegreen`	`darkorange`
`darkorchid`	`darkred`	`darksalmon`	`darkseagreen`
`darkslateblue`	`darkslategray`	`darkslategrey`	`darkturquoise`
`darkviolet`	`deeppink`	`deepskyblue`	`dimgray`
`dimgrey`	`dodgerblue`	`firebrick`	`floralwhite`
`forestgreen`	`gainsboro`	`ghostwhite`	`gold`
`goldenrod`	`gray`	`greenyellow`	`grey`
`honeydew`	`hotpink`	`indianred`	`indigo`
`ivory`	`khaki`	`lavender`	`lavenderblush`
`lawngreen`	`lemonchiffon`	`lightblue`	`lightcoral`
`lightcyan`	`lightgoldenrodyellow`	`lightgray`	`lightgreen`
`lightgrey`	`lightpink`	`lightsalmon`	`lightseagreen`
`lightskyblue`	`lightslategray`	`lightslategrey`	`lightsteelblue`
`lightyellow`	`limegreen`	`linen`	`magenta`
`mediumaquamarine`	`mediumblue`	`mediumorchid`	`mediumpurple`
`mediumseagreen`	`mediumslateblue`	`mediumspringgreen`	`mediumturquoise`
`mediumvioletred`	`midnightblue`	`mintcream`	`mistyrose`
`moccasin`	`navajowhite`	`oldlace`	`olivedrab`
`orange`	`orangered`	`orchid`	`palegoldenrod`
`palegreen`	`paleturquoise`	`palevioletred`	`papayawhip`
`peachpuff`	`peru`	`pink`	`plum`
`powderblue`	`rebeccapurple`	`rosybrown`	`royalblue`
`saddlebrown`	`salmon`	`sandybrown`	`seagreen`
`seashell`	`sienna`	`skyblue`	`slateblue`
`slategray`	`slategrey`	`snow`	`springgreen`
`steelblue`	`tan`	`thistle`	`tomato`
`transparent`	`turquoise`	`violet`	`wheat`
`whitesmoke`	`yellowgreen`

Неколико <named-color> су синоними:

aqua и cyan,
fuchsia и magenta,
darkgray и darkgrey,
darkslategray и darkslategrey,
dimgray и dimgrey,
lightgray и lightgrey,
lightslategray и lightslategrey,
gray и grey,
slategray и slategrey.

Боје можеш наводити и RGB декадним вредностима функционалном нотацијом rgb() којом се изражава боја у sRGB простору боја према њеним црвеним, зеленим и плавим компонентама. Опционална алфа компонента представља транспарентност боје. На пример:

body {
    background-color: rgb(176, 216, 230);
}
h1 {
    color: rgb(0, 0, 128);
}
p {
    color: rgb(139, 0, 0);
}

...или хексадекадним вредностима...

body {
    background-color: #add8e6;
}
h1 {
    color: #000080;
}
p {
    color: #8b0000;
}

...где прве две хексадекадне цифре представљају комбинација вредности за црвену, следеће две за зелену и последње две за плаву компоненту.

Боје у CSS-у можеш наводити и функционалном нотацијом hsl() којом се изражава боја у sRGB простору према њеним компонентама нијансе, засићености и осветљености. Опционална алфа компонента представља транспарентност боје. На пример:

body {
    background-color: hsl(195, 53%, 79%);
}
h1 {
    color: hsl(240, 100%, 25%);
}
p {
    color: hsl(0, 100%, 27%);
}