À propos Open Color
Open Color est un jeu de couleurs open source optimisé pour l’UI, avec 13 familles et dix niveaux perceptuels (50 à 900) choisis pour la clarté à l’écran comme à l’impression.
Utilisation
Référencez des variables Open Color comme --oc-blue-5 en CSS, ou importez la map JS. Les niveaux sont calibrés pour l’accessibilité, pas seulement l’esthétique.
Documentation officielle ↗
Gray
#ADB5BD
Nuances
50 #F8F 100 #F1F 200 #E9E 300 #DEE 400 #CED 500 #ADB 600 #868 700 #495 800 #343 900 #212
Red
#FF6B6B
Nuances
50 #FFF 100 #FFE 200 #FFC 300 #FFA 400 #FF8 500 #FF6 600 #FA5 700 #F03 800 #E03 900 #C92
Pink
#F06595
Nuances
50 #FFF 100 #FFD 200 #FCC 300 #FAA 400 #F78 500 #F06 600 #E64 700 #D63 800 #C22 900 #A61
Grape
#CC5DE8
Nuances
50 #F8F 100 #F3D 200 #EEB 300 #E59 400 #DA7 500 #CC5 600 #BE4 700 #AE3 800 #9C3 900 #862
Violet
#845EF7
Nuances
50 #F3F 100 #E5D 200 #D0B 300 #B19 400 #977 500 #845 600 #795 700 #704 800 #674 900 #5F3
Indigo
#5C7CFA
Nuances
50 #EDF 100 #DBE 200 #BAC 300 #91A 400 #748 500 #5C7 600 #4C6 700 #426 800 #3B5 900 #364
Blue
#339AF0
Nuances
50 #E7F 100 #D0E 200 #A5D 300 #74C 400 #4DA 500 #339 600 #228 700 #1C7 800 #197 900 #186
Cyan
#22B8CF
Nuances
50 #E3F 100 #C5F 200 #99E 300 #66D 400 #3BC 500 #22B 600 #15A 700 #109 800 #0C8 900 #0B7
Teal
#20C997
Nuances
50 #E6F 100 #C3F 200 #96F 300 #63E 400 #38D 500 #20C 600 #12B 700 #0CA 800 #099 900 #087
Green
#51CF66
Nuances
50 #EBF 100 #D3F 200 #B2F 300 #8CE 400 #69D 500 #51C 600 #40C 700 #37B 800 #2F9 900 #2B8
Lime
#94D82D
Nuances
50 #F4F 100 #E9F 200 #D8F 300 #C0E 400 #A9E 500 #94D 600 #82C 700 #74B 800 #66A 900 #5C9
Yellow
#FCC419
Nuances
50 #FFF 100 #FFF 200 #FFE 300 #FFE 400 #FFD 500 #FCC 600 #FAB 700 #F59 800 #F08 900 #E67
Orange
#FF922B
Nuances
50 #FFF 100 #FFE 200 #FFD 300 #FFC 400 #FFA 500 #FF9 600 #FD7 700 #F76 800 #E85 900 #D94
Aucune couleur correspondante
Source: Open Color 1.9.1 · open-color.js
