# Dégradé sarcelle : codes du lagon aux abysses [Canonical HTML page](https://gradiently.design/fr/guide/teal-gradient) La sarcelle se place exactement entre le bleu et le vert : calme, subtile et très facile à fondre. Descendez du lagon aux grands fonds avec un code pour chaque profondeur. ## The short version - 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. 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. - Hauts-fonds: #ccfbf1 - Lagon: #5eead4 - Aqua: #2dd4bf - Sarcelle: #14b8a6 - Récif: #0d9488 - Varech: #0f766e - Sarcelle profonde: #115e59 - Abysses: #042f2e Huit sarcelles du clair au sombre. Deux ou trois voisines donnent un fondu calme ; du clair au sombre, de la profondeur. ## 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. - Hauts-fonds: `linear-gradient(180deg, #f0fdfa 0%, #99f6e4 100%)` - Lagon: `linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)` - Du ciel au lagon: `linear-gradient(135deg, #e0f2fe 0%, #5eead4 100%)` - Piscine au soleil: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #99f6e4 45%, #2dd4bf 100%)` Des sarcelles pâles qui restent fraîches. Chacune garde un arrêt presque blanc où le texte foncé peut se poser. ## 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. - Récif: `linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%)` - Jade: `linear-gradient(135deg, #34d399 0%, #0d9488 100%)` - Du cyan au varech: `linear-gradient(135deg, #22d3ee 0%, #0f766e 100%)` - Sarcelle vers bleu: `linear-gradient(120deg, #14b8a6 0%, #0ea5e9 100%)` - Sarcelle en trois étapes: `linear-gradient(160deg, #5eead4 0%, #14b8a6 50%, #0f766e 100%)` Les sarcelles moyennes tirent vers l’émeraude ou le bleu. Choisissez le sens selon ce que votre marque doit évoquer. ## 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](https://gradiently.design/fr/guide/gradient-banding). - Descente: `linear-gradient(180deg, #0f766e 0%, #042f2e 100%)` - Lumière d’en haut: `radial-gradient(circle at 75% 20%, #14b8a6 0%, #115e59 35%, #031d1c 80%)` - Sarcelle profonde vers minuit: `linear-gradient(135deg, #134e4a 0%, #0c1f2e 100%)` - Rayon de lumière: `radial-gradient(ellipse at 50% 0%, #2dd4bf 0%, #0f4c47 30%, #021614 75%)` Des sarcelles sombres avec une seule source de lumière. Elles font luxueuses et calmes. ## 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](https://gradiently.design/fr/guide/complementary-colors) expliquent cette attraction, et [les dégradés corail](https://gradiently.design/fr/guide/coral-gradient) donnent les codes de l’autre côté. - À éviter : le milieu gris: `linear-gradient(90deg, #14b8a6 0%, #fb7185 100%)` - Soleil de cuivre sur sarcelle profonde: `radial-gradient(circle at 85% 15%, #fb923c 0%, transparent 25%), linear-gradient(160deg, #0f766e 0%, #042f2e 100%)` - Sarcelle pâle vers pêche: `linear-gradient(135deg, #ccfbf1 0%, #fde2cf 100%)` Un fondu saturé de sarcelle vers corail grisaille au milieu. Une petite lumière chaude sur la sarcelle, ou deux teintes pâles, marche bien mieux. 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. | Vous êtes | Essayez | Associez à | | --- | --- | --- | | Une clinique, une piscine ou une marque de soin | Hauts-fonds ou Lagon | Texte anthracite, beaucoup de blanc | | Une appli ou un produit fintech | Sarcelle vers bleu | Un seul bouton corail | | Un café, un fleuriste ou une jardinerie | Jade | Crème et terre cuite | | Un hôtel, un bar ou un cabinet d’avocats | Lumière d’en haut | Détails en cuivre ou en laiton | | Un événement en soirée | Rayon de lumière | Titre lagon pâle | Des points de départ, pas des règles. Testez chacun avec votre vrai titre et votre logo. ## 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](https://gradiently.design/fr/guide/dark-mode-design). ```css :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); } ``` Une coque sarcelle profond avec une lueur sarcelle en haut. Les liens lagon pâle restent lisibles dessus. ## 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. | Fond | Texte blanc | Texte Abysses #042f2e | | --- | --- | --- | | Lagon `#5eead4` | Échec | Environ 9,8:1 | | Sarcelle `#14b8a6` | Environ 2,5:1, échec | Environ 5,8:1 | | Récif `#0d9488` | Environ 3,7:1, grand texte seulement | Faible | | Varech `#0f766e` | Environ 5,5:1, réussi | Échec | | Sarcelle profonde `#115e59` | Environ 7,6:1, réussi | Échec | La sarcelle passe du texte foncé au texte blanc entre Récif et Varech. Un post portrait de spa avec du texte blanc sur un dégradé sarcelle profond En post portrait, le titre se pose dans la sarcelle la plus calme. Le même design de spa en story verticale, avec la lumière sarcelle déplacée pour s’adapter au format 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](https://gradiently.design/fr/guide/website-hero-background). ## FAQ ### 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.