Les Couleurs du DSFR
Vous trouverez ici toutes les couleurs et leur nom de variables CSS (CSS custom properties) ci-dessous.
D’abord toutes celles du thème clair, puis toutes celles du thème sombre.
Couleurs du thème clair
grey :
- grey-0-1000
- grey-50-1000
- grey-200-850
- grey-425-625
- grey-625-425
- grey-900-175
- grey-925-125
- grey-950-100-active
- grey-950-100-hover
- grey-950-100
- grey-950-125-active
- grey-950-125-hover
- grey-950-125
- grey-950-150-active
- grey-950-150-hover
- grey-950-150
- grey-975-75-active
- grey-975-75-hover
- grey-975-75
- grey-975-100-active
- grey-975-100-hover
- grey-975-100
- grey-975-125-active
- grey-975-125-hover
- grey-975-125
- grey-1000-50-active
- grey-1000-50-hover
- grey-1000-50
- grey-1000-75-active
- grey-1000-75-hover
- grey-1000-75
- grey-1000-100-active
- grey-1000-100-hover
- grey-1000-100
blue-france :
- blue-france-sun-113-625-active
- blue-france-sun-113-625-hover
- blue-france-sun-113-625
- blue-france-main-525
- blue-france-850-200
- blue-france-925-125-active
- blue-france-925-125-hover
- blue-france-925-125
- blue-france-950-100-active
- blue-france-950-100-hover
- blue-france-950-100
- blue-france-975-75-active
- blue-france-975-75-hover
- blue-france-975-75
- blue-france-975-sun-113
red-marianne :
- red-marianne-425-625-active
- red-marianne-425-625-hover
- red-marianne-425-625
- red-marianne-main-472
- red-marianne-850-200
- red-marianne-925-125-active
- red-marianne-925-125-hover
- red-marianne-925-125
- red-marianne-950-100-active
- red-marianne-950-100-hover
- red-marianne-950-100
- red-marianne-975-75-active
- red-marianne-975-75-hover
- red-marianne-975-75
info :
- info-425-625-active
- info-425-625-hover
- info-425-625
- info-950-100-active
- info-950-100-hover
- info-950-100
- info-975-75
success :
- success-425-625-active
- success-425-625-hover
- success-425-625
- success-950-100-active
- success-950-100-hover
- success-950-100
- success-975-75
warning :
- warning-425-625-active
- warning-425-625-hover
- warning-425-625
- warning-950-100-active
- warning-950-100-hover
- warning-950-100
- warning-975-75
error :
- error-425-625-active
- error-425-625-hover
- error-425-625
- error-950-100-active
- error-950-100-hover
- error-950-100
- error-975-75
green-tilleul-verveine :
- green-tilleul-verveine-sun-418-moon-817-active
- green-tilleul-verveine-sun-418-moon-817-hover
- green-tilleul-verveine-sun-418-moon-817
- green-tilleul-verveine-main-707
- green-tilleul-verveine-850-200
- green-tilleul-verveine-925-125-active
- green-tilleul-verveine-925-125-hover
- green-tilleul-verveine-925-125
- green-tilleul-verveine-950-100-active
- green-tilleul-verveine-950-100-hover
- green-tilleul-verveine-950-100
- green-tilleul-verveine-975-75-active
- green-tilleul-verveine-975-75-hover
- green-tilleul-verveine-975-75
green-bourgeon :
- green-bourgeon-sun-425-moon-759-active
- green-bourgeon-sun-425-moon-759-hover
- green-bourgeon-sun-425-moon-759
- green-bourgeon-main-640
- green-bourgeon-850-200
- green-bourgeon-925-125-active
- green-bourgeon-925-125-hover
- green-bourgeon-925-125
- green-bourgeon-950-100-active
- green-bourgeon-950-100-hover
- green-bourgeon-950-100
- green-bourgeon-975-75-active
- green-bourgeon-975-75-hover
- green-bourgeon-975-75
green-emeraude :
- green-emeraude-sun-425-moon-753-active
- green-emeraude-sun-425-moon-753-hover
- green-emeraude-sun-425-moon-753
- green-emeraude-main-632
- green-emeraude-850-200
- green-emeraude-925-125-active
- green-emeraude-925-125-hover
- green-emeraude-925-125
- green-emeraude-950-100-active
- green-emeraude-950-100-hover
- green-emeraude-950-100
- green-emeraude-975-75-active
- green-emeraude-975-75-hover
- green-emeraude-975-75
green-menthe :
- green-menthe-sun-373-moon-652-active
- green-menthe-sun-373-moon-652-hover
- green-menthe-sun-373-moon-652
- green-menthe-main-548
- green-menthe-850-200
- green-menthe-925-125-active
- green-menthe-925-125-hover
- green-menthe-925-125
- green-menthe-950-100-active
- green-menthe-950-100-hover
- green-menthe-950-100
- green-menthe-975-75-active
- green-menthe-975-75-hover
- green-menthe-975-75
green-archipel :
- green-archipel-sun-391-moon-716-active
- green-archipel-sun-391-moon-716-hover
- green-archipel-sun-391-moon-716
- green-archipel-main-557
- green-archipel-850-200
- green-archipel-925-125-active
- green-archipel-925-125-hover
- green-archipel-925-125
- green-archipel-950-100-active
- green-archipel-950-100-hover
- green-archipel-950-100
- green-archipel-975-75-active
- green-archipel-975-75-hover
- green-archipel-975-75
blue-ecume :
- blue-ecume-sun-247-moon-675-active
- blue-ecume-sun-247-moon-675-hover
- blue-ecume-sun-247-moon-675
- blue-ecume-main-400
- blue-ecume-850-200
- blue-ecume-925-125-active
- blue-ecume-925-125-hover
- blue-ecume-925-125
- blue-ecume-950-100-active
- blue-ecume-950-100-hover
- blue-ecume-950-100
- blue-ecume-975-75-active
- blue-ecume-975-75-hover
- blue-ecume-975-75
blue-cumulus :
- blue-cumulus-sun-368-moon-732-active
- blue-cumulus-sun-368-moon-732-hover
- blue-cumulus-sun-368-moon-732
- blue-cumulus-main-526
- blue-cumulus-850-200
- blue-cumulus-925-125-active
- blue-cumulus-925-125-hover
- blue-cumulus-925-125
- blue-cumulus-950-100-active
- blue-cumulus-950-100-hover
- blue-cumulus-950-100
- blue-cumulus-975-75-active
- blue-cumulus-975-75-hover
- blue-cumulus-975-75
purple-glycine :
- purple-glycine-sun-319-moon-630-active
- purple-glycine-sun-319-moon-630-hover
- purple-glycine-sun-319-moon-630
- purple-glycine-main-494
- purple-glycine-850-200
- purple-glycine-925-125-active
- purple-glycine-925-125-hover
- purple-glycine-925-125
- purple-glycine-950-100-active
- purple-glycine-950-100-hover
- purple-glycine-950-100
- purple-glycine-975-75-active
- purple-glycine-975-75-hover
- purple-glycine-975-75
pink-macaron :
- pink-macaron-sun-406-moon-833-active
- pink-macaron-sun-406-moon-833-hover
- pink-macaron-sun-406-moon-833
- pink-macaron-main-689
- pink-macaron-850-200
- pink-macaron-925-125-active
- pink-macaron-925-125-hover
- pink-macaron-925-125
- pink-macaron-950-100-active
- pink-macaron-950-100-hover
- pink-macaron-950-100
- pink-macaron-975-75-active
- pink-macaron-975-75-hover
- pink-macaron-975-75
pink-tuile :
- pink-tuile-sun-425-moon-750-active
- pink-tuile-sun-425-moon-750-hover
- pink-tuile-sun-425-moon-750
- pink-tuile-main-556
- pink-tuile-850-200
- pink-tuile-925-125-active
- pink-tuile-925-125-hover
- pink-tuile-925-125
- pink-tuile-950-100-active
- pink-tuile-950-100-hover
- pink-tuile-950-100
- pink-tuile-975-75-active
- pink-tuile-975-75-hover
- pink-tuile-975-75
yellow-tournesol :
- yellow-tournesol-sun-407-moon-922-active
- yellow-tournesol-sun-407-moon-922-hover
- yellow-tournesol-sun-407-moon-922
- yellow-tournesol-main-731
- yellow-tournesol-850-200
- yellow-tournesol-925-125-active
- yellow-tournesol-925-125-hover
- yellow-tournesol-925-125
- yellow-tournesol-950-100-active
- yellow-tournesol-950-100-hover
- yellow-tournesol-950-100
- yellow-tournesol-975-75-active
- yellow-tournesol-975-75-hover
- yellow-tournesol-975-75
yellow-moutarde :
- yellow-moutarde-sun-348-moon-860-active
- yellow-moutarde-sun-348-moon-860-hover
- yellow-moutarde-sun-348-moon-860
- yellow-moutarde-main-679
- yellow-moutarde-850-200
- yellow-moutarde-925-125-active
- yellow-moutarde-925-125-hover
- yellow-moutarde-925-125
- yellow-moutarde-950-100-active
- yellow-moutarde-950-100-hover
- yellow-moutarde-950-100
- yellow-moutarde-975-75-active
- yellow-moutarde-975-75-hover
- yellow-moutarde-975-75
orange-terre-battue :
- orange-terre-battue-sun-370-moon-672-active
- orange-terre-battue-sun-370-moon-672-hover
- orange-terre-battue-sun-370-moon-672
- orange-terre-battue-main-645
- orange-terre-battue-850-200
- orange-terre-battue-925-125-active
- orange-terre-battue-925-125-hover
- orange-terre-battue-925-125
- orange-terre-battue-950-100-active
- orange-terre-battue-950-100-hover
- orange-terre-battue-950-100
- orange-terre-battue-975-75-active
- orange-terre-battue-975-75-hover
- orange-terre-battue-975-75
brown-cafe-creme :
- brown-cafe-creme-sun-383-moon-885-active
- brown-cafe-creme-sun-383-moon-885-hover
- brown-cafe-creme-sun-383-moon-885
- brown-cafe-creme-main-782
- brown-cafe-creme-850-200
- brown-cafe-creme-925-125-active
- brown-cafe-creme-925-125-hover
- brown-cafe-creme-925-125
- brown-cafe-creme-950-100-active
- brown-cafe-creme-950-100-hover
- brown-cafe-creme-950-100
- brown-cafe-creme-975-75-active
- brown-cafe-creme-975-75-hover
- brown-cafe-creme-975-75
brown-caramel :
- brown-caramel-sun-425-moon-901-active
- brown-caramel-sun-425-moon-901-hover
- brown-caramel-sun-425-moon-901
- brown-caramel-main-648
- brown-caramel-850-200
- brown-caramel-925-125-active
- brown-caramel-925-125-hover
- brown-caramel-925-125
- brown-caramel-950-100-active
- brown-caramel-950-100-hover
- brown-caramel-950-100
- brown-caramel-975-75-active
- brown-caramel-975-75-hover
- brown-caramel-975-75
brown-opera :
- brown-opera-sun-395-moon-820-active
- brown-opera-sun-395-moon-820-hover
- brown-opera-sun-395-moon-820
- brown-opera-main-680
- brown-opera-850-200
- brown-opera-925-125-active
- brown-opera-925-125-hover
- brown-opera-925-125
- brown-opera-950-100-active
- brown-opera-950-100-hover
- brown-opera-950-100
- brown-opera-975-75-active
- brown-opera-975-75-hover
- brown-opera-975-75
beige-gris-galet :
- beige-gris-galet-sun-407-moon-821-active
- beige-gris-galet-sun-407-moon-821-hover
- beige-gris-galet-sun-407-moon-821
- beige-gris-galet-main-702
- beige-gris-galet-850-200
- beige-gris-galet-925-125-active
- beige-gris-galet-925-125-hover
- beige-gris-galet-925-125
- beige-gris-galet-950-100-active
- beige-gris-galet-950-100-hover
- beige-gris-galet-950-100
- beige-gris-galet-975-75-active
- beige-gris-galet-975-75-hover
- beige-gris-galet-975-75
Couleurs du thème sombre
grey :
- grey-0-1000
- grey-50-1000
- grey-200-850
- grey-425-625
- grey-625-425
- grey-900-175
- grey-925-125
- grey-950-100-active
- grey-950-100-hover
- grey-950-100
- grey-950-125-active
- grey-950-125-hover
- grey-950-125
- grey-950-150-active
- grey-950-150-hover
- grey-950-150
- grey-975-75-active
- grey-975-75-hover
- grey-975-75
- grey-975-100-active
- grey-975-100-hover
- grey-975-100
- grey-975-125-active
- grey-975-125-hover
- grey-975-125
- grey-1000-50-active
- grey-1000-50-hover
- grey-1000-50
- grey-1000-75-active
- grey-1000-75-hover
- grey-1000-75
- grey-1000-100-active
- grey-1000-100-hover
- grey-1000-100
blue-france :
- blue-france-sun-113-625-active
- blue-france-sun-113-625-hover
- blue-france-sun-113-625
- blue-france-main-525
- blue-france-850-200
- blue-france-925-125-active
- blue-france-925-125-hover
- blue-france-925-125
- blue-france-950-100-active
- blue-france-950-100-hover
- blue-france-950-100
- blue-france-975-75-active
- blue-france-975-75-hover
- blue-france-975-75
- blue-france-975-sun-113
red-marianne :
- red-marianne-425-625-active
- red-marianne-425-625-hover
- red-marianne-425-625
- red-marianne-main-472
- red-marianne-850-200
- red-marianne-925-125-active
- red-marianne-925-125-hover
- red-marianne-925-125
- red-marianne-950-100-active
- red-marianne-950-100-hover
- red-marianne-950-100
- red-marianne-975-75-active
- red-marianne-975-75-hover
- red-marianne-975-75
info :
- info-425-625-active
- info-425-625-hover
- info-425-625
- info-950-100-active
- info-950-100-hover
- info-950-100
- info-975-75
success :
- success-425-625-active
- success-425-625-hover
- success-425-625
- success-950-100-active
- success-950-100-hover
- success-950-100
- success-975-75
warning :
- warning-425-625-active
- warning-425-625-hover
- warning-425-625
- warning-950-100-active
- warning-950-100-hover
- warning-950-100
- warning-975-75
error :
- error-425-625-active
- error-425-625-hover
- error-425-625
- error-950-100-active
- error-950-100-hover
- error-950-100
- error-975-75
green-tilleul-verveine :
- green-tilleul-verveine-sun-418-moon-817-active
- green-tilleul-verveine-sun-418-moon-817-hover
- green-tilleul-verveine-sun-418-moon-817
- green-tilleul-verveine-main-707
- green-tilleul-verveine-850-200
- green-tilleul-verveine-925-125-active
- green-tilleul-verveine-925-125-hover
- green-tilleul-verveine-925-125
- green-tilleul-verveine-950-100-active
- green-tilleul-verveine-950-100-hover
- green-tilleul-verveine-950-100
- green-tilleul-verveine-975-75-active
- green-tilleul-verveine-975-75-hover
- green-tilleul-verveine-975-75
green-bourgeon :
- green-bourgeon-sun-425-moon-759-active
- green-bourgeon-sun-425-moon-759-hover
- green-bourgeon-sun-425-moon-759
- green-bourgeon-main-640
- green-bourgeon-850-200
- green-bourgeon-925-125-active
- green-bourgeon-925-125-hover
- green-bourgeon-925-125
- green-bourgeon-950-100-active
- green-bourgeon-950-100-hover
- green-bourgeon-950-100
- green-bourgeon-975-75-active
- green-bourgeon-975-75-hover
- green-bourgeon-975-75
green-emeraude :
- green-emeraude-sun-425-moon-753-active
- green-emeraude-sun-425-moon-753-hover
- green-emeraude-sun-425-moon-753
- green-emeraude-main-632
- green-emeraude-850-200
- green-emeraude-925-125-active
- green-emeraude-925-125-hover
- green-emeraude-925-125
- green-emeraude-950-100-active
- green-emeraude-950-100-hover
- green-emeraude-950-100
- green-emeraude-975-75-active
- green-emeraude-975-75-hover
- green-emeraude-975-75
green-menthe :
- green-menthe-sun-373-moon-652-active
- green-menthe-sun-373-moon-652-hover
- green-menthe-sun-373-moon-652
- green-menthe-main-548
- green-menthe-850-200
- green-menthe-925-125-active
- green-menthe-925-125-hover
- green-menthe-925-125
- green-menthe-950-100-active
- green-menthe-950-100-hover
- green-menthe-950-100
- green-menthe-975-75-active
- green-menthe-975-75-hover
- green-menthe-975-75
green-archipel :
- green-archipel-sun-391-moon-716-active
- green-archipel-sun-391-moon-716-hover
- green-archipel-sun-391-moon-716
- green-archipel-main-557
- green-archipel-850-200
- green-archipel-925-125-active
- green-archipel-925-125-hover
- green-archipel-925-125
- green-archipel-950-100-active
- green-archipel-950-100-hover
- green-archipel-950-100
- green-archipel-975-75-active
- green-archipel-975-75-hover
- green-archipel-975-75
blue-ecume :
- blue-ecume-sun-247-moon-675-active
- blue-ecume-sun-247-moon-675-hover
- blue-ecume-sun-247-moon-675
- blue-ecume-main-400
- blue-ecume-850-200
- blue-ecume-925-125-active
- blue-ecume-925-125-hover
- blue-ecume-925-125
- blue-ecume-950-100-active
- blue-ecume-950-100-hover
- blue-ecume-950-100
- blue-ecume-975-75-active
- blue-ecume-975-75-hover
- blue-ecume-975-75
blue-cumulus :
- blue-cumulus-sun-368-moon-732-active
- blue-cumulus-sun-368-moon-732-hover
- blue-cumulus-sun-368-moon-732
- blue-cumulus-main-526
- blue-cumulus-850-200
- blue-cumulus-925-125-active
- blue-cumulus-925-125-hover
- blue-cumulus-925-125
- blue-cumulus-950-100-active
- blue-cumulus-950-100-hover
- blue-cumulus-950-100
- blue-cumulus-975-75-active
- blue-cumulus-975-75-hover
- blue-cumulus-975-75
purple-glycine :
- purple-glycine-sun-319-moon-630-active
- purple-glycine-sun-319-moon-630-hover
- purple-glycine-sun-319-moon-630
- purple-glycine-main-494
- purple-glycine-850-200
- purple-glycine-925-125-active
- purple-glycine-925-125-hover
- purple-glycine-925-125
- purple-glycine-950-100-active
- purple-glycine-950-100-hover
- purple-glycine-950-100
- purple-glycine-975-75-active
- purple-glycine-975-75-hover
- purple-glycine-975-75
pink-macaron :
- pink-macaron-sun-406-moon-833-active
- pink-macaron-sun-406-moon-833-hover
- pink-macaron-sun-406-moon-833
- pink-macaron-main-689
- pink-macaron-850-200
- pink-macaron-925-125-active
- pink-macaron-925-125-hover
- pink-macaron-925-125
- pink-macaron-950-100-active
- pink-macaron-950-100-hover
- pink-macaron-950-100
- pink-macaron-975-75-active
- pink-macaron-975-75-hover
- pink-macaron-975-75
pink-tuile :
- pink-tuile-sun-425-moon-750-active
- pink-tuile-sun-425-moon-750-hover
- pink-tuile-sun-425-moon-750
- pink-tuile-main-556
- pink-tuile-850-200
- pink-tuile-925-125-active
- pink-tuile-925-125-hover
- pink-tuile-925-125
- pink-tuile-950-100-active
- pink-tuile-950-100-hover
- pink-tuile-950-100
- pink-tuile-975-75-active
- pink-tuile-975-75-hover
- pink-tuile-975-75
yellow-tournesol :
- yellow-tournesol-sun-407-moon-922-active
- yellow-tournesol-sun-407-moon-922-hover
- yellow-tournesol-sun-407-moon-922
- yellow-tournesol-main-731
- yellow-tournesol-850-200
- yellow-tournesol-925-125-active
- yellow-tournesol-925-125-hover
- yellow-tournesol-925-125
- yellow-tournesol-950-100-active
- yellow-tournesol-950-100-hover
- yellow-tournesol-950-100
- yellow-tournesol-975-75-active
- yellow-tournesol-975-75-hover
- yellow-tournesol-975-75
yellow-moutarde :
- yellow-moutarde-sun-348-moon-860-active
- yellow-moutarde-sun-348-moon-860-hover
- yellow-moutarde-sun-348-moon-860
- yellow-moutarde-main-679
- yellow-moutarde-850-200
- yellow-moutarde-925-125-active
- yellow-moutarde-925-125-hover
- yellow-moutarde-925-125
- yellow-moutarde-950-100-active
- yellow-moutarde-950-100-hover
- yellow-moutarde-950-100
- yellow-moutarde-975-75-active
- yellow-moutarde-975-75-hover
- yellow-moutarde-975-75
orange-terre-battue :
- orange-terre-battue-sun-370-moon-672-active
- orange-terre-battue-sun-370-moon-672-hover
- orange-terre-battue-sun-370-moon-672
- orange-terre-battue-main-645
- orange-terre-battue-850-200
- orange-terre-battue-925-125-active
- orange-terre-battue-925-125-hover
- orange-terre-battue-925-125
- orange-terre-battue-950-100-active
- orange-terre-battue-950-100-hover
- orange-terre-battue-950-100
- orange-terre-battue-975-75-active
- orange-terre-battue-975-75-hover
- orange-terre-battue-975-75
brown-cafe-creme :
- brown-cafe-creme-sun-383-moon-885-active
- brown-cafe-creme-sun-383-moon-885-hover
- brown-cafe-creme-sun-383-moon-885
- brown-cafe-creme-main-782
- brown-cafe-creme-850-200
- brown-cafe-creme-925-125-active
- brown-cafe-creme-925-125-hover
- brown-cafe-creme-925-125
- brown-cafe-creme-950-100-active
- brown-cafe-creme-950-100-hover
- brown-cafe-creme-950-100
- brown-cafe-creme-975-75-active
- brown-cafe-creme-975-75-hover
- brown-cafe-creme-975-75
brown-caramel :
- brown-caramel-sun-425-moon-901-active
- brown-caramel-sun-425-moon-901-hover
- brown-caramel-sun-425-moon-901
- brown-caramel-main-648
- brown-caramel-850-200
- brown-caramel-925-125-active
- brown-caramel-925-125-hover
- brown-caramel-925-125
- brown-caramel-950-100-active
- brown-caramel-950-100-hover
- brown-caramel-950-100
- brown-caramel-975-75-active
- brown-caramel-975-75-hover
- brown-caramel-975-75
brown-opera :
- brown-opera-sun-395-moon-820-active
- brown-opera-sun-395-moon-820-hover
- brown-opera-sun-395-moon-820
- brown-opera-main-680
- brown-opera-850-200
- brown-opera-925-125-active
- brown-opera-925-125-hover
- brown-opera-925-125
- brown-opera-950-100-active
- brown-opera-950-100-hover
- brown-opera-950-100
- brown-opera-975-75-active
- brown-opera-975-75-hover
- brown-opera-975-75
beige-gris-galet :
- beige-gris-galet-sun-407-moon-821-active
- beige-gris-galet-sun-407-moon-821-hover
- beige-gris-galet-sun-407-moon-821
- beige-gris-galet-main-702
- beige-gris-galet-850-200
- beige-gris-galet-925-125-active
- beige-gris-galet-925-125-hover
- beige-gris-galet-925-125
- beige-gris-galet-950-100-active
- beige-gris-galet-950-100-hover
- beige-gris-galet-950-100
- beige-gris-galet-975-75-active
- beige-gris-galet-975-75-hover
- beige-gris-galet-975-75