L’essentiel en bref
- 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.
Sur cette page
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.
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.
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 couvrent la famille des bleus au sens large.
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 avant d’exporter.
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é expliquent le fonctionnement des positions.
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
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 détaillent la syntaxe.
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; }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 pour d’autres techniques.
Une story qui va d’une eau vive en haut à un bleu profond en bas, avec les mots dans la bande la plus calme.
Les questions qu’on nous pose
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.
É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