# Dégradé océan : codes des hauts-fonds aux abysses [Canonical HTML page](https://gradiently.design/fr/guide/ocean-gradient) La mer est déjà un dégradé : pâle sur le sable, vive là où le soleil arrive, presque noire là où il n’arrive pas. Copiez cet ordre et votre océan paraîtra vrai. Voici les codes, profondeur par profondeur. ## The short version - Un dégradé océan fond des bleus et des bleu-vert dans l’ordre où l’eau réelle les montre : pâle et turquoise près du bord, bleu net au large et marine presque noir dans les profondeurs. - L’eau absorbe d’abord la lumière rouge, ce qui explique que la mer devienne plus bleue et plus sombre avec la profondeur. - Les dégradés océan verticaux, clairs en haut et sombres en bas, se lisent comme de la profondeur ; un arrêt net entre deux bleus se lit comme un horizon. - Le texte blanc fonctionne sur la moitié bleu profond d’un dégradé océan ; les hauts-fonds pâles demandent un texte bleu marine foncé. - Les dégradés océan conviennent au voyage, à la natation, à la voile, aux fruits de mer, au développement durable et aux produits technologiques apaisants. Un **dégradé océan** fond des bleus et des bleu-vert dans le même ordre que la mer : aqua pâle sur le sable, turquoise près du bord, bleu net au large et marine presque noir dans les profondeurs. Menez-le de haut en bas, du clair au sombre, et on le lit comme de la profondeur sans qu’on ait à le dire. Les codes ci-dessous suivent cette plongée, puis ajoutent des fondus d’horizon, une mer CSS pleine page et les couleurs de texte qui gardent les mots lisibles sur l’eau. ## Pourquoi l’océan est bleu, et pourquoi cela compte pour votre dégradé L’eau absorbe d’abord l’extrémité rouge de la lumière du soleil, puis le jaune et le vert : plus on descend, plus il ne reste que du bleu, puis même lui s’éteint. L’eau peu profonde sur du sable clair réfléchit beaucoup de lumière et paraît turquoise ; l’eau profonde paraît marine sombre. Un dégradé océan qui garde cet ordre paraît naturel ; celui qui met du bleu foncé au-dessus du turquoise paraît à l’envers, sans que personne sache dire pourquoi. - Écume: #e0f7f4 - Hauts-fonds: #7ee0d6 - Lagon: #22b8cf - Pleine mer: #0284c7 - Houle: #075985 - Zone crépusculaire: #0c3b66 - Profondeurs: #082f49 - Abysses: #020c1b La mer de haut en bas. La plupart des dégradés océan emploient trois ou quatre arrêts voisins de cette colonne. ## Dégradés océan peu profonds L’extrémité vive : l’eau qu’on voit d’une plage ou d’un bateau par beau temps. Ensoleillés, nets et engageants, ils conviennent aux marques de vacances, aux maillots, aux entreprises de piscines et aux menus d’été. Le côté plus tropical est traité dans [les dégradés turquoise](https://gradiently.design/fr/guide/turquoise-gradient). - De l’écume aux hauts-fonds: `linear-gradient(180deg, #e0f7f4 0%, #7ee0d6 100%)` - Eau claire: `linear-gradient(180deg, #a5f3fc 0%, #22b8cf 100%)` - Soleil sur l’eau: `radial-gradient(circle at 30% 20%, #f0fdfa 0%, #7ee0d6 40%, #0891b2 100%)` - Tombant du récif: `linear-gradient(160deg, #7ee0d6 0%, #22b8cf 50%, #0284c7 100%)` Des fondus d’eau peu profonde. Chacun commence par un arrêt pâle ou vif, comme l’eau claire sur le sable. ## Dégradés de pleine mer Plus au large, la mer perd son vert et devient d’un bleu net et assuré. Ces fondus paraissent fiables, calmes et compétents, d’où leur place pour les clubs de voile, les assureurs voyage, les sciences marines et les marques de technologie qui veulent du bleu sans la froideur du marine corporate. [Les dégradés bleus](https://gradiently.design/fr/guide/blue-gradient) couvrent la famille des bleus au sens large. - Pleine mer: `linear-gradient(180deg, #38bdf8 0%, #0284c7 50%, #075985 100%)` - Atlantique: `linear-gradient(135deg, #22b8cf 0%, #1d4ed8 100%)` - Au large: `linear-gradient(180deg, #0ea5e9 0%, #0c3b66 100%)` - Houle: `linear-gradient(160deg, #0284c7 0%, #075985 45%, #0c3b66 100%)` Des bleus de haute mer. Moins de vert, plus de profondeur, et assez vifs en haut pour évoquer la lumière du jour. ## Dégradés d’océan profond Tout au fond de la plongée, la mer devient presque noire avec juste une trace de bleu. Dramatiques et silencieux à la fois : écoles de plongée, documentaires, montres de luxe, restaurants de fruits de mer après la tombée de la nuit. Une faible lueur d’en haut, comme la lumière de la surface, les empêche de paraître vides. Les fondus sombres forment facilement des bandes : lisez [le banding des dégradés](https://gradiently.design/fr/guide/gradient-banding) avant d’exporter. - Descente: `linear-gradient(180deg, #075985 0%, #082f49 50%, #020c1b 100%)` - Lumière de la surface: `radial-gradient(ellipse at 50% 0%, #0ea5e9 0%, #0c3b66 30%, #020c1b 80%)` - Bioluminescence: `radial-gradient(circle at 70% 80%, #22b8cf 0%, #082f49 30%, #020c1b 75%)` Des fondus de grands fonds. Une seule source de lumière douce suffit ; tout le reste est profondeur. ## Dégradés d’horizon et de rivage Les designs océan incluent souvent le ciel ou la plage. L’astuce pour un horizon est l’arrêt net : deux arrêts de couleur à la même position, pour que le ciel finisse et que la mer commence sur une ligne nette. Un rivage fonctionne à l’inverse, en fondant la mer dans le sable par un arrêt d’écume pâle pour que les couleurs chaudes et froides ne se rencontrent jamais en gris. [Les arrêts de dégradé](https://gradiently.design/fr/guide/gradient-stops) expliquent le fonctionnement des positions. - Horizon à l’aube: `linear-gradient(180deg, #fde2cf 0%, #bae6fd 45%, #0284c7 45%, #082f49 100%)` - Horizon de midi: `linear-gradient(180deg, #bfdbfe 0%, #e0f2fe 52%, #0ea5e9 52%, #0c3b66 100%)` - Rivage: `linear-gradient(180deg, #0284c7 0%, #7ee0d6 50%, #e0f7f4 70%, #f5deb3 100%)` Les arrêts nets font un horizon ; un arrêt d’écume pâle fait un rivage doux. ## Choisir la direction pour chaque format Un dégradé océan signifiant la profondeur, il marche mieux à la verticale, et les formats hauts montrent toute la plongée. En formats larges, un fondu d’horizon ou une lueur radiale fonctionne généralement mieux que de comprimer toute la mer dans une faible hauteur. Un post portrait est entre les deux : un fondu vertical doux de la pleine mer aux profondeurs fonctionne, tant que le titre tombe dans une seule bande plutôt qu’à cheval sur le changement. - Story 1080×1920: 1080 × 1920 - Épingle 1000×1500: 1000 × 1500 - Post 1080×1350: 1080 × 1350 - Hero de site 1920×1080: 1920 × 1080 - Bannière LinkedIn 1584×396: 1584 × 396 Sur les stories et les épingles, employez toute la hauteur pour la plongée. Sur le hero et la bannière, essayez plutôt un horizon ou une lumière venant d’un côté. C’est là qu’une image unique recadrée vous déçoit : la lumière se retrouve au mauvais endroit sur la moitié de vos formats. Un Mark Gradiently est au contraire recalculé dans chaque format, et le Designer peut produire la story, le post et la bannière à partir d’un seul brief, pour que la mer soit bien placée dans chacun. ## Un dégradé océan en CSS pour une page entière Une longue page peut devenir une plongée : vive en haut, profonde au pied de page. Attachez le dégradé à toute la hauteur du document plutôt qu’à la fenêtre, donnez-lui une couleur de repli unie et ajoutez une douce lueur de surface en haut. [Les dégradés linéaires CSS](https://gradiently.design/fr/guide/css-linear-gradient) détaillent la syntaxe. ```css html { background-color: #082f49; /* fallback, and the colour seen on overscroll */ } body { min-height: 100vh; margin: 0; color: #082f49; background-image: radial-gradient(ellipse 90% 30% at 50% 0%, rgb(224 247 244 / 0.8) 0%, transparent 70%), linear-gradient(180deg, #7ee0d6 0%, #22b8cf 18%, #0284c7 40%, #075985 65%, #082f49 85%, #020c1b 100%); } /* switch to light text once the page reaches deep water */ .deep { color: #e0f7f4; } ``` Une page qui s’approfondit au défilement. Employez un texte foncé dans les sections vives du haut et un texte clair dans celles du bas. ## Du texte sur un dégradé océan Un fondu océan va du très clair au très sombre : aucune couleur de texte ne marche sur toute sa surface. Du bleu marine profond `#082f49` sur bleu ciel pâle `#7dd3fc` mesure environ 8,3 pour 1. Du blanc sur houle `#075985` mesure environ 7,6 pour 1, et sur pleine mer `#0284c7` il tombe à environ 4,1 pour 1, correct pour de grands titres mais insuffisant pour du corps de texte. Placez les mots là où la couleur leur convient, et voyez [le texte sur les dégradés](https://gradiently.design/fr/guide/text-on-gradient) pour d’autres techniques. Une story de club de voile avec un titre net sur un dégradé océan qui s’assombrit du bleu vif au marine profond Une story qui va d’une eau vive en haut à un bleu profond en bas, avec les mots dans la bande la plus calme. ## FAQ ### Quelles couleurs composent un dégradé océan ? Aqua pâle, turquoise, bleu net, bleu profond et marine presque noir, dans cet ordre de haut en bas. Des codes comme `#7ee0d6`, `#0284c7` et `#082f49` couvrent la gamme. ### Un dégradé océan va-t-il du clair au sombre ou du sombre au clair ? Clair en haut et sombre en bas, ce qui correspond à la façon dont la lumière s’éteint avec la profondeur dans l’eau réelle. ### Comment faire une ligne d’horizon dans un dégradé CSS ? Donnez à deux arrêts de couleur la même position, comme `#bae6fd 45%, #0284c7 45%`. La couleur change alors sur une ligne nette plutôt qu’en fondu. ### Quelle couleur de texte sur un dégradé océan ? Un bleu marine foncé sur la partie claire du haut et du blanc sur la partie profonde du bas. Vérifiez le point situé juste derrière chaque ligne de texte. ### Quelle différence entre un dégradé océan et un dégradé bleu ? Un dégradé océan suit l’ordre de l’eau réelle et inclut généralement du turquoise et du marine presque noir. Un dégradé bleu peut être n’importe quel fondu de bleus.