kolor

Sposoby zapisu wartości kolorów:

kolor rgb

procentowo – rgb(r%,g%,b%);

wartościami – rgb(255, 255, 255);

r-red
g-green
b-blue

Wartość procentów nie sumuje się i ich łączna wartość może przekroczyć 100%.

przykład:
zapis koloru czerwonego (tła strony):

rgb(88.6275%, 12,.9412%, 9.0196%);

rgb(226, 33, 23);

kolor hsl

kolor okreslany jako jeden punkt w przestrzeni trójwymiarowej określonej przez składowe: hue/ saturation/ brightness – odcień/ nasycenie/ jasność

hue – 0° – 360°
saturation – 0 – 1, 0 – 100%
lightness – 0 – 1, 0 – 100%

360° koło kolorów

0°/360° – czerwony
30° – czerwono-żółte
60° – żółty

przykład:
zapis koloru czerwonego:

hsl(3%, 90%, 89%);

kolor hsla, rgba

rozwinięcie modelu hsl o wartość przeźroczystości (parametr alpha) o wartościach od 0 do 1 ze skopkiem co 0.1

hsl(3%, 90%, 89%, 0.3);

rgba(226, 33, 23, 0.3);

kolor heksadecymaly

wartości rgb (red, green, blue) zapisane w wartościach szesnastkowych.

przykład:
zapis koloru czerwonego:

#(E22117);

Przejrzystość

zmienna wartość krycia koloru

właściwość alfa – wartość od 0 do 1.

używamy jej w zapisie koloru w rgb lub hsl. W systemie heksadecymalnym nie ma możliwości dodania parametru przejrzystości.

przykład:
zapis koloru czerwonego:

rgb(226, 33, 23, 0.5);

hsl(3%, 90%, 89%, 0.5);

niektóre nazwy kolorów:

aqua

black

gray

blue

fuchsia

green

lime
maroon
navy
olive
purple
red
silver
teal
yellow

gradient

<pre class=" language-css"><code class=" language-css"><span class="token selector"><span class="token id">#color-example</span> </span><span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right, white, <span class="token function">color</span><span class="token punctuation">(</span>blue <span class="token function">blend</span><span class="token punctuation">(</span>lime <span class="token number">50%</span><span class="token punctuation">)</span><span class="token punctuation">)</span>, black<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>

–