Créer une palette de couleur [CSS14]

Cet exercice consiste à générer une palette de couleurs avec des outils en ligne puis à la présenter proprement en HTML et CSS.

Consignes de l’exercice

Préparation de l’exercice

Créez un dossier racine locale qui contiendra tous les fichiers de l’exercice.

Dans le dossier racine, créez un nouveau fichier .css vierge avec le nom style.css.

Dans le dossier racine créer un nouveau fichier html avec toute la structure de base d’une page web.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
    </head>
    <body>

    </body>
</html>

Intégrez le fichier .css dans la page web.

Code à placer dans l’en-tête de la page HTML en personnalisant la valeur de l’attribut href si nécessaire afin qu’elle corresponde à l’emplacement et au nom du fichier CSS.

<link  rel="stylesheet" type="text/css" href="style.css">

Gardez les deux fichiers html et css ouverts dans votre logiciel d’édition et ouvrez la page html dans votre navigateur pour consulter les modifications.

Choix des couleurs

Créez une palette de couleur de quatre ou cinq couleurs avec un outil de votre choix :

Création du HTML de la palette de couleurs

HTML : Créez un bloc HTML neutre auquel vous ajoutez la classe palette.

Le seul élément HTML de type bloc qui est complétement neutre et l’élément <div>. Cela signifie que l’élément n’a aucune valeur sémantique, ce ne sera pas le cas par exemple pour <p>, <h1>, <aside>.

<div class="palette"></div>

HTML : À l’intérieur du bloc créé à la question précédente, insérez pour chacune des couleurs choisies pour votre palette, un bloc neutre contenant le texte du code hexadécimal de la couleur.

<div class="palette">
    <div>#545454</div>
    <div>#69747c</div>
    <div>#6baa75</div>
    <div>#84dd63</div>
    <div>#cbff4d</div>
</div>

HTML : Ajoutez une classe couleur à chaque élément <div> contenant les codes des couleurs.

<div class="palette">
    <div class="couleur1">#545454</div>
    <div class="couleur2">#69747c</div>
    <div class="couleur3">#6baa75</div>
    <div class="couleur4">#84dd63</div>
    <div class="couleur5">#cbff4d</div>
</div>

HTML : Ajoutez une seconde classe couleurX à chaque élément <div> contenant les codes des couleurs sous la forme couleur1, couleur2, ….

<div class="palette">
    <div class="couleur couleur1">#545454</div>
    <div class="couleur couleur2">#69747c</div>
    <div class="couleur couleur3">#6baa75</div>
    <div class="couleur couleur4">#84dd63</div>
    <div class="couleur couleur5">#cbff4d</div>
</div>

HTML : Ajoutez un élément span supplémentaire autour de chacun des codes couleurs afin de pouvoir les mettre en forme plus facilement. Ces éléments span vont permettre de modifier le texte des codes couleur indépendamment des blocs eux-même.

<div id="palette">
    <div class="couleur couleur1">
        <span>#545454</span>
    </div>
    <div class="couleur couleur2">
        <span>#69747c</span>
    </div>
    <div class="couleur couleur3">
        <span>#6baa75</span>
    </div>
    <div class="couleur couleur4">
        <span>#84dd63</span>
    </div>
    <div class="couleur couleur5">
        <span>#cbff4d</span>
    </div>
</div>

Mise en forme de la palette de couleurs en CSS

À ce point d’étape, vous avez donc des éléments HTML, avec le texte des codes couleurs, qui vont pouvoir être modifiés en CSS :

Vous utiliserez le sélecteur de classe .couleur pour modifier toutes les couleurs simultanément. Cette classe peut être supprimée, vous pourriez alors utiliser le sélecteur .palette div ;
Vous utiliserez les sélecteurs de classe .couleur1, .couleur2, etc pour modifier les couleurs individuellement.

CSS : Définissez la couleur saisie, en tant que texte dans la page html, comme couleur d’arrière-plan de l’élément.

background-color

.couleur1 {
    background-color: #545454;
}
.couleur2 {
    background-color: #69747c;
}

CSS : Transformez le conteneur .palette en boite flexible en lui ajoutant la propriété suivante : display: flex;. Si les boites flexibles n’ont pas encore été abordées en cours, elles le seront prochainement vous pouvez en savoir plus en consultant la présentation suivante les boites flexibles en CSS.

.palette {
    display: flex;
}

CSS : Ajoutez une hauteur et une largeur de votre choix, identique pour les 4 ou 5 blocs colorés.

height, width

CSS : Ciblez les éléments span afin de les transformer en éléments de type bloc (par défaut span sont des éléments inline). Cette opération va permettre de dimensionner les éléments span en question.

display

Vous devez sélectionner spécifiquement les éléments span qui se trouvent à l’intérieur de l’élément palette ou bien des éléments couleur, pour ne pas modifier les span qui se trouveraient ailleurs sur votre page web.

.palette span {
    display: block;
}

CSS : Ajoutez une couleur d’arrière-plan et une couleur de texte de votre choix aux éléments span pour obtenir un résultat similaire à l’image suivante. Nous ferrons référence à l’affichage des codes en les appelant les étiquettes.

color

CSS : Dimensionnez les étiquettes et ajoutez leur des marges internes et externes afin d’obtenir le résultat suivant.

margin, padding, text-align

Personnalisation de la palette

Essayez maintenant de personnaliser votre palette de couleurs en modifiant le CSS de votre page. Vous pouvez également adapter le HTML si vous pensez que cela est nécessaire. Voici quelques exemples de personnalisation :

Sauf mention contraire*, l'article Créer une palette de couleur [CSS14] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.