AKLibrary

MENU

Couleurs

Fonctionnement

Les class de couleurs sont composées de 3 variables :
--primary_color : Définit la couleur principale/primaire du composant.
--secondary_color : Définit la couleur secondaire du composant.
--font_color : Définit la couleur de la police d'écriture

Personnaliser

Les couleurs proposées par la librairie ne vous plaisent pas ?
Pas de problème, appliquez vos propres couleurs, quelque soit l'élément souhaité !

Pour cela il suffit de modifier les variables dans le css du composant en question :

maCouleur

.maCouleur {
    --primary_color: grey;
    --secondary_color: dodgerblue;
    --font_color: limegreen;
}

Reverse ⮀

Vous souhaitez inverser la couleur primaire et secondaire ?
Pas de problème, rajoutez juste un R majuscule devant le nom de la couleur souhaité.
(Fonctionne seulement avec les couleurs de la librairie)

dark Rdark

RGB

HSL

HEX

Cacher les valeurs

water

P

hsl(235, 80%, 60%)

#4755eb

rgb(71, 85, 235)

S

hsl(235, 60%, 50%)

#3340cc

rgb(51, 64, 204)

fire

P

hsl(0, 80%, 60%)

#eb4747

rgb(235, 71, 71)

S

hsl(0, 60%, 50%)

#cc3333

rgb(204, 51, 51)

leaf

P

hsl(130, 60%, 60%)

#5cd670

rgb(92, 214, 112)

S

hsl(130, 70%, 50%)

#26d944

rgb(38, 217, 68)

wind

P

hsl(0, 0%, 75%)

#bfbfbf

rgb(191, 191, 191)

S

hsl(0, 0%, 60%)

#999999

rgb(153, 153, 153)

dark

P

hsl(0, 0%, 30%)

#4d4d4d

rgb(77, 77, 77)

S

hsl(0, 0%, 20%)

#333333

rgb(51, 51, 51)

magic

P

hsl(270, 80%, 60%)

#9947eb

rgb(153, 71, 235)

S

hsl(270, 60%, 50%)

#7f33cc

rgb(127, 51, 204)

ocean

P

hsl(200, 90%, 60%)

#3db8f5

rgb(61, 184, 245)

S

hsl(200, 70%, 50%)

#269dd9

rgb(38, 157, 217)

amber

P

hsl(30, 100%, 60%)

#ff9933

rgb(255, 153, 51)

S

hsl(30, 100%, 50%)

#ff8000

rgb(255, 128, 0)

hell

P

hsl(10, 80%, 40%)

#b83014

rgb(184, 48, 20)

S

hsl(10, 100%, 30%)

#991900

rgb(153, 25, 0)

gold

P

hsl(50, 80%, 50%)

#e6c419

rgb(230, 196, 25)

S

hsl(50, 80%, 40%)

#b89c14

rgb(184, 156, 20)

silver

P

hsl(200, 20%, 50%)

#668899

rgb(102, 136, 153)

S

hsl(200, 20%, 60%)

#85a0ad

rgb(133, 160, 173)

fairy

P

hsl(340, 80%, 60%)

#eb477e

rgb(235, 71, 126)

S

hsl(340, 70%, 50%)

#d92662

rgb(217, 38, 98)

wood

P

hsl(30, 100%, 40%)

#cc6600

rgb(204, 102, 0)

S

hsl(30, 100%, 30%)

#994c00

rgb(153, 76, 0)

grass

P

hsl(120, 80%, 40%)

#14b814

rgb(20, 184, 20)

S

hsl(120, 80%, 30%)

#0f8a0f

rgb(15, 138, 15)

spectrum

P

hsl(270, 20%, 50%)

#7f6699

rgb(127, 102, 153)

S

hsl(270, 20%, 40%)

#66527a

rgb(102, 82, 122)

snow

P

hsl(0, 0%, 100%)

#ffffff

rgb(255, 255, 255)

S

hsl(0, 0%, 80%)

#cccccc

rgb(204, 204, 204)