Une palette aux couleurs de ZdS pour GIMP / Inkscape

a marqué ce sujet comme résolu.

Salut tout le monde !

Je fais ce post très court juste pour partager avec vous une palette que j’ai fais pour Inkscape (marche aussi avec GIMP) qui reprend les couleurs de Zeste de Savoir, au cas où certains d’entre-vous voudraient faire de jolis dessins aux couleurs du site. :)

Les codes couleurs viennent du fichier _colors.scss sur le Github du site. La couleur « Touche de clavier » est celle que l’on obtient en faisant ceci (||ceci||).

Voilà le contenu du fichier. Vous pouvez par exemple le nommer zestedesavoir.gpl.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
GIMP Palette
Name: Zeste de savoir

8   69  97    Bleu primaire (#084561)
248 173 50    Orange secondaire (#F8AD32)
247 247 247   Fond (#F7F7F7)
57  106 129   Primaire hover (#396a81)
240 240 240   Fond de la sidebar (#F0F0F0)
255 255 255   Sidebar hover (#FFF)
72  162 0     Bandeau succès (#48A200)
192 57  43    Bandeau danger/ erreur (#C0392B)
248 246 234   Touche de clavier (#F8F6EA)
233 249 220   Forum message utile (#E9F9DC)
111 111 111   Casquette (#6F6F6F)
43  92  115   Casquette des staffs (#2B5C73)

Voilà voilà, si ça peut être utile à quelqu’un… :)

+6 -0

Oh, merci. Possibilité dr mettre sur le depot git (celui des documents de comm ou autre ?)

qwerty

Si tu y as accès, pas de souci. Sinon, je peux faire une PR. ;)

+0 -0

Je précise que toutes les couleurs du site ne sont pas dans le fichier _colors.scss donc la palette est pour l’instant incomplète. :)

Situphen

Oups ! En effet, il en manque pas mal. :honte:

Voici une version plus complète. Les noms des couleurs ne sont pas normalisées, je ne suis pas sur du formatage à adopter.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
GIMP Palette
Name: Zeste de savoir

# Couleurs principales
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/variables/_colors.scss
  8  69  97   Bleu primaire (#084561)
248 173  50   Orange secondaire (#F8AD32)
247 247 247   Fond (#F7F7F7)
 57 106 129   Primaire hover (#396A81)
 72 162   0   Couleur succès formulaire / vote + (#48A200)
192  57  43   Couleur erreur formulaire / vote - (#C0392B)
248 246 234   Touche de clavier (#F8F6EA)
233 249 220   Forum message utile (#E9F9DC)
111 111 111   Casquette (#6F6F6F)
 43  92 115   Casquette des staffs (#2B5C73)

# Sidebar
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/layout/_sidebar.scss
240 240 240   Fond de la sidebar (#F0F0F0)
255 255 255   Sidebar hover (#FFF)

# Bandeaux d'alertes
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/components/_alert-box.scss
 72 162   0   Bandeau succès (#48A200)
192  57  43   Bandeau erreur (#C0392B)
230 126  34   Bandeau avertissement (#E67E22)
253 253 253   Bandeau non-inscrits fond / fond topic (#FDFDFD)
 51  51  51   Bandeau non-inscrits texte (#333333)
119 119 119   Bandeau non-inscrits ombre (#777777)

# Accessibilité
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/components/_accessibility-bar.scss
  6  46  65   Accessibilité fond (#062E41)
238 238 238   Accessibilité lien / Aide Markdown (#EEEEEE)

# Liste des auteurs d'un contenu
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/components/_authors.scss
156 156 156   Auteurs texte (#9C9C9C)
224 228 229   Auteurs bordure (#E0E4E5)
205 208 209   Avatar bordure (#CDD0D1)
221 221 221   Avatar focus (#DDDDDD)

# Arborescence
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/components/_breadcrumb.scss
  8  69  97   Arborescence lien (#084561)

# Boite de contenu
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/components/_content-item.scss
 66  66  66   Titre de boite de contenu / texte pied de page (#424242)
153 153 153   Description de boite de contenu (#999999)
 80  80  80   Description de boite de topic (#505050)

# Bannière cookies
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/components/_cookies-banner.scss
  6  46  65   Bannière cookies fond (#062E41)

# Éditeur
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/components/_editor.scss
153 153 153   Éditeur bouton aperçu (#999999)
  8  69  97   Éditeur bouton envoyer (#084561)
 57 106 129   Éditeur bouton envoyer focus (#396A81)
200 123   2   Éditeur dropdown langage focus (#C87B02)

# Menu principal
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/components/_header-dropdown.scss
149 215 245   Menu principal catégorie (#95D7F5)
 39  74  90   Menu principal bordure catégories / catégorie focus (#274A5A)

# Pagination
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/components/_pagination.scss
251 251 251   Pagination fond (#FBFBFB)
210 213 214   Pagination bordure / topic meta (#D2D5D6)
128 128 128   Pagination page courante texte (#808080)
247 247 247   Pagination page courante fond (#F7F7F7)
210 213 214   Pagination focus (#D2D5D6)

Pour ceux que ça intéresse, voici le script quick and dirty que j’ai fais pour ne pas avoir à convertir tous les codes hexa en RGB moi-même. :p

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import webcolors  # Disponnible avec "pip".

text = """\
# Pagination
# https://github.com/zestedesavoir/zds-site/blob/dev/assets/scss/components/_pagination.scss
Pagination fond (#FBFBFB)
Pagination bordure / topic meta (#D2D5D6)
Pagination page courante texte (#808080)
Pagination page courante fond (#F7F7F7)
Pagination focus (#D2D5D6)"""

outfile = open("palette.gpl", 'w')
outlines = []

for line in text.splitlines():
    if not line or line.startswith('#'):
        outlines.append(line)
        continue
    code = line.split()[-1].strip('()')
    rgb = webcolors.hex_to_rgb(code)
    # La méthode "str.rjust(x)" fait comme "str.zfill(x)", mais avec des espaces.
    formated_code = [str(i).rjust(3) for i in rgb]
    line = ' '.join(formated_code) + '   ' + line
    outlines.append(line)
outfile.write('\n'.join(outlines))
+2 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte