gugalcrom.net

Culori CSS

Pentru a adăuga culori și alte stiluri la o pagină HTML, se folosește CSS. În acest articol voi explica toate modalitățile de adăugare a culorii în CSS.

Coduri de culoare

Unul dintre cele mai simple moduri de a găsi o culoare este folosirea unui <input type="color">

Rezultatul este:

dă clic pentru a alege o culoare

În practică

În CSS, culorile se adaugă ca parametru la o regulă:

        .red {
            color: red;
        }
        body {
            background-color: #87cefa;
        }
        img {
            border: 3px solid rgb(255, 255, 255)
        }
        

Culori predefinite

Există o listă de culori standard web, care poate fi folosită tastând numele culorii.

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

Hexadecimal

Pentru control mai precis, culorile pot fi definite și exact. Cea mai populară metodă este codul hexadecimal.

        hex-example{
            background-color: #00aa45;
        }
        

va rezulta în:

Test

RGB și HSL

Chiar dacă funcționează diferit, RGB și HSL se folosesc la fel în CSS:

        rgb-example{
            background-color: rgb(150, 0, 255);
        }
        

va rezulta în:

Test

iar

        hsl-example{
            background-color: hsl(300, 100%, 50%);
        }
        

va rezulta în:

Test

RGB și HSL pot avea opacitate, folosind rgba și hsla. Exemplu:

        rgba-example{
            background-color: rgba(0, 0, 0, 80%);
            color: white;
        }
        

va rezulta în: (fundal multicolor pentru a demonstra)

Test

+ Funcții experimentale

În CSS există mai multe funcții experimentale de culoare, ca lab(), lch() și color() Aceste funcții pot afișa culori din afara sRGB, prin spațiul de culoare Display-P3, pe care majoritatea monitoarelor din ziua de azi le pot afișa. Totuși, aceste funcții sunt experimentale și nu sunt suportate peste tot.