L’essentiel en bref
- Un dégradé sarcelle fond des nuances de bleu-vert, en général d’un aqua pâle à un bleu-vert profond.
- La sarcelle se fond sans heurt avec ses voisines : cyan, émeraude, bleu et bleu marine.
- Des accents chauds comme le corail, la pêche et le cuivre sont à l’opposé de la sarcelle et la font rayonner quand on les garde hors du dégradé.
- Un texte blanc exige une sarcelle au moins aussi profonde que #0f766e pour passer le contraste ; les sarcelles plus claires veulent un texte foncé.
- Une sarcelle très sombre fait un excellent fond de mode sombre : plus douce que le noir, moins attendue que le bleu marine.
Sur cette page
Un dégradé sarcelle court entre des nuances de bleu-vert : un aqua pâle côté lumière, une sarcelle franche au milieu et un bleu-vert encre tout en bas. Comme la sarcelle se tient à mi-chemin entre le bleu et le vert, elle glisse facilement vers l’un ou l’autre et ne tourne presque jamais au boueux. Les codes ci-dessous la suivent par profondeur, d’un lagon ensoleillé aux grands fonds, avec des conseils d’accents, de CSS et de texte pour chacun.
Une échelle de sarcelles pour bâtir tous vos dégradés
La plupart des beaux dégradés sarcelle tiennent en deux à quatre étapes de cette échelle. Prenez des voisines pour un fondu doux, ou sautez trois barreaux pour du drame. Les noms ci-dessous servent dans tout l’article.
Dégradés sarcelle clairs : lagon et hauts-fonds
La sarcelle claire est nette, fraîche et discrètement joyeuse. Elle convient au bien-être, aux piscines et maillots, aux cabinets dentaires et de santé, et à tout produit qui veut paraître propre sans la froideur du bleu pur. Menez-la vers le blanc ou vers une menthe pâle pour la garder douce.
Dégradés sarcelle moyens : récif et jade
Le milieu de la gamme, c’est la sarcelle la plus sûre d’elle. Ces dégradés servent bien les applis, les tableaux de bord fintech, les marques durables et l’éducation, car ils inspirent à la fois confiance (le bleu) et vie (le vert). Pencher vers l’émeraude donne du naturel ; pencher vers le bleu donne du technique.
Dégradés sarcelle sombres : les grands fonds
Au bout sombre de l’échelle, la sarcelle devient presque noire, avec un souffle de vert froid. C’est la sarcelle la plus raffinée : cabinets d’avocats, spiritueux, hôtels, architecture, soirées. Elle offre aussi un superbe fond pour un seul accent vif, puisque rien en elle ne lui fait concurrence. Les fondus sombres forment des bandes dans les exports compressés, un peu de grain aide donc ; voir le banding des dégradés.
Des accents chauds pour un dégradé sarcelle
L’opposé de la sarcelle sur le cercle chromatique est un rouge orangé chaud : corail, pêche, abricot et cuivre la font tous chanter. Gardez la couleur chaude hors du dégradé lui-même : un dégradé de sarcelle vers corail traverse un gris terne au milieu. Réservez l’accent à un bouton, un titre ou une petite forme. Les couleurs complémentaires expliquent cette attraction, et les dégradés corail donnent les codes de l’autre côté.
Remarquez la troisième pastille : des teintes très pâles de couleurs opposées se fondent bien, car il y a peu de saturation à perdre. C’est une astuce précieuse pour les emballages doux et la papeterie de mariage.
Choisir un dégradé sarcelle pour votre marque
La sarcelle est prisée des marques de santé, de finance et de développement durable : la nuance seule ne vous distinguera donc pas. Ce qui le fera, c’est la profondeur choisie, l’accent associé et le support. Partez du rôle que le design doit jouer.
Essayez
Associez à
Essayez
Associez à
Essayez
Associez à
Essayez
Associez à
Essayez
Associez à
CSS de dégradé sarcelle pour une interface en mode sombre
La sarcelle profonde remplace joliment le noir ou le bleu marine dans une interface sombre. Elle est plus douce que le noir pur et laisse au texte pâle un large contraste. Voici un fond pour la coque d’une appli, avec une lueur douce en haut de page. Plus sur la méthode dans le design en mode sombre.
:root {
--abyss: #042f2e;
--deep-teal: #115e59;
--lagoon: #5eead4;
}
body {
min-height: 100vh;
margin: 0;
color: #f0fdfa;
background-color: var(--abyss);
background-image:
radial-gradient(ellipse 80% 50% at 50% 0%, rgb(20 184 166 / 0.35) 0%, transparent 70%),
linear-gradient(180deg, var(--deep-teal) 0%, var(--abyss) 60%);
}
a { color: var(--lagoon); }Un texte lisible sur sarcelle
La sarcelle moyenne est trompeuse. #14b8a6 semble assez forte pour du blanc, mais mesure environ 2,5 pour 1, un échec net. Le blanc demande Varech (#0f766e, environ 5,5 pour 1) ou plus foncé. À partir d’Aqua vers le clair, prenez la couleur Abysses #042f2e comme encre : le texte reste dans la famille sarcelle et se lit sans effort.
#5eead4Texte blanc
Texte Abysses #042f2e
#14b8a6Texte blanc
Texte Abysses #042f2e
#0d9488Texte blanc
Texte Abysses #042f2e
#0f766eTexte blanc
Texte Abysses #042f2e
#115e59Texte blanc
Texte Abysses #042f2e
En post portrait, le titre se pose dans la sarcelle la plus calme.
Le même design en story, recalculé plutôt que recadré.
Ce dernier point compte plus qu’il n’y paraît. Un dégradé recadré d’un post vers une story déplace la lumière au mauvais endroit. Dans Gradiently, un Mark est rendu à chaque taille, et le Designer peut créer les autres formats pour vous : votre look sarcelle reste donc équilibré dans le fil, la story et le hero de votre site.
Les questions qu’on nous pose
Quelles couleurs vont avec un dégradé sarcelle ?
Le cyan, l’émeraude, le bleu et le bleu marine s’y fondent. Le corail, la pêche, le cuivre et l’or font de forts accents chauds, utilisés hors du dégradé.
Quel est le code hex de la sarcelle ?
La couleur nommée teal du web vaut #008080. La plupart des palettes modernes emploient des versions plus vives, comme #14b8a6 pour une sarcelle moyenne et #0f766e pour une plus profonde.
Quelle différence entre sarcelle et turquoise ?
La sarcelle est plus profonde et plus sourde ; la turquoise est plus claire, plus vive et tire un peu plus vers le vert. Toutes deux se trouvent entre le bleu et le vert.
Puis-je mettre du texte blanc sur du sarcelle ?
Seulement sur une sarcelle profonde, à partir d’environ #0f766e vers le foncé. Les sarcelles vives et claires demandent un texte foncé pour passer le contraste.
La sarcelle convient-elle au mode sombre ?
Oui. Une sarcelle très sombre comme #042f2e est plus douce que le noir et plus distinctive que le bleu marine, et les accents sarcelle pâle s’y lisent bien.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil