Funkce pro míchání barev

Funkce v této části jsou podobné blend módům, které najdeme v editorech jako je Photoshop, Fireworks nebo GIMP.

multiply

Tato funkce násobí dvě barvy. Odpovídající RGB kanály z obou barev se vynásobí a poté vydělí 255. Výsledkem je tmavší barva.

Parametry

první barva
druhá barva

// LESS

div {
color: multiply(#ff6600, #00ff00);
}

/* zkompilované CSS */

div {
color: #006600;
}

#ff6600

#00ff00

#006600

screen

Tato funkce je opakem funkce multiply. Výsledkem je jasnější barva.

Parametry

první barva
druhá barva

// LESS

div {
color: screen(#ff6600, #00ff00);
}

/* zkompilované CSS */

div {
color: #ffff00;
}

#ff6600

#00ff00

#ffff00

overlay

Tato funkce kombinuje efekty funkcí multiply a screen. Podmíněně zesvětlí světlé kanály a ztmaví tmavé kanály. Výsledek je podmíněn barvou předanou v prvním parametru.

Parametry

první barva (tato barva určuje jestli bude výsledek světlejší nebo tmavší)
druhá barva (barva pro překrytí)

// LESS

div {
color: overlay(#ff6600, #00ff00);
}

/* zkompilované CSS */

div {
color: #ffcc00;
}

#ff6600

#00ff00

#ffcc00

softlight

Tato funkce je podobná funkci overlay, narozdíl od ní se ale vyhýbá čistě černé a čistě bílé barvě.

Parametry

první barva (barva, která jemně zesvětlí barvu předanou v druhém parametru)
druhá barva (barva, která bude jemně zesvětlena)

// LESS

div {
color: softlight(#ff6600, #00ff00);
}

/* zkompilované CSS */

div {
color: #ffa100;
}

#ff6600

#00ff00

#ffa100

hardlight

Tato funkce je stejná jako funkce overlay ale s prohozenými parametry.

Parametry

první barva (barva pro překrytí)
druhá barva (tato barva určuje jestli bude výsledek světlejší nebo tmavší)

// LESS

div {
color: hardlight(#ff6600, #00ff00);
}

/* zkompilované CSS */

div {
color: #00ff00;
}

#ff6600

#00ff00

difference

Tato funkce odečte barvu předanou v druhém parametru od barvy předané v prvním parametru. Odečítání se provádí mezi odpovídajícími kanály. Negativní hodnoty jsou převráceny.

Parametry

první barva
druhá barva

// LESS

div {
color: difference(#ff6600, #00ff00);
}

/* zkompilované CSS */

div {
color: #ff9900;
}

#ff6600

#00ff00

#ff9900

exclusion

Tato funkce vytváří podobný efekt jako funkce difference ale s menším kontrastem.

Parametry

první barva
druhá barva

// LESS

div {
color: exclusion(#ff6600, #00ff00);
}

/* zkompilované CSS */

div {
color: #ff9900;
}

#ff6600

#00ff00

#ff9900

average

Tato funkce vypočítá průměr dvou barev. Počítá se mezi odpovídajícími kanály.

Parametry

první barva
druhá barva

// LESS

div {
color: average(#ff6600, #00ff00);
}

/* zkompilované CSS */

div {
color: #80b300;
}

#ff6600

#00ff00

#80b300

negation

Tato funkce vytváří opačný efekt funkce difference. Neznamená to ale že funkce negation provádí sčítání. Výsledkem je jasnější barva.

Parametry

první barva
druhá barva

// LESS

div {
color: negation(#ff6600, #00ff00);
}

/* zkompilované CSS */

div {
color: #ff9900;
}

#ff6600

#00ff00

#ff9900