CSS ļauj norādīt krāsas gandrīz jebkuram elementam — teksta krāsu (color), fona krāsu (background-color), apmales krāsu (border-color) un citas.

Krāsu norādīšanas veidi

CSS atbalsta vairākus veidus, kā norādīt krāsas:

1. Krāsu nosaukumi

CSS atbalsta vairāk nekā 140 krāsu nosaukumus angļu valodā:

color: red;
background: dodgerblue;
border-color: tomato;

2. HEX kods (heksadecimālais)

Populārākais veids. Sākas ar #, satur 6 simbolus (pa diviem sarkanajam, zaļajam un zilajam kanālam):

color: #ff0000; /* sarkans */
color: #3498db; /* zils */
color: #2c3e50; /* tumši zils */

Ja katrs kanāla pāris ir vienāds, var lietot saīsinātu formu: #f00 = #ff0000

3. RGB un RGBA

Norāda sarkano, zaļo un zilo kanālu (0–255). RGBA pievieno caurspīdīguma kanālu (0–1):

color: rgb(255, 0, 0); /* sarkans */
color: rgb(52, 152, 219); /* zils */
background: rgba(0, 0, 0, 0.5); /* 50% caurspīdīgs melns */

4. HSL un HSLA

Norāda krāsu ar nokrāsu (0–360°), piesātinājumu (0–100%) un gaišumu (0–100%). Šis formāts ir intuitīvāks krāsu izvēlē:

color: hsl(0, 100%, 50%); /* sarkans */
color: hsl(210, 70%, 53%); /* zils */
background: hsla(0, 0%, 0%, 0.5); /* 50% caurspīdīgs melns */

Caurspīdīgums

Ar opacity var mainīt visa elementa caurspīdīgumu (0 = pilnīgi caurspīdīgs, 1 = pilnīgi necaurspīdīgs):

.caurspidigs {
opacity: 0.7;
}

Ja vēlies caurspīdīgu tikai fonu, bet ne tekstu, lieto rgba() vai hsla().

Gradienti

CSS3 ļauj veidot krāsu pārejas (gradientus) bez attēliem:

/* Lineārs gradients */
background: linear-gradient(to right, #3498db, #2ecc71);

/* Ar leņķi */
background: linear-gradient(45deg, #e74c3c, #f39c12);

/* Radiālais gradients */
background: radial-gradient(circle, #3498db, #2c3e50);

Krāsu izvēles rīki

  • Pārlūkprogrammas DevTools (F12) — noklikšķini uz krāsas vērtības CSS panelī, lai atvērtu krāsu izvēlētāju
  • Coolors.co — krāsu palešu ģenerators
  • Adobe Color — profesionāls krāsu harmonijas rīks