Combinaisons de palettes de couleurs pour portfolio (20 choix + Hex)

Une palette de couleurs forte pour un portfolio fait bien plus qu’être “jolie” : elle fixe discrètement des attentes quant à votre goût, votre expertise et la qualité de votre travail. Le bon équilibre entre neutres et accents rend les études de cas plus faciles à parcourir et inspire confiance dans vos appels à l’action.

Voici plus de 20 idées de palettes de couleurs pour portfolios (avec codes HEX) à copier, modifier et visualiser sur sites web, CV, présentations et branding personnel.

Pourquoi les palettes pour portfolio fonctionnent si bien

Les couleurs d’un portfolio jouent un rôle important : elles créent une hiérarchie, guident l’attention et aident les visiteurs à comprendre ce qui est le plus important (rôle, résultats, visuels clés). Si votre palette est cohérente, votre travail paraît plus uniforme, même sur différents projets.

La plupart des bonnes combinaisons de couleurs pour portfolio misent sur des tons neutres comme base (pour que le contenu reste lisible) et utilisent un accent marqué pour les actions et les éléments clés. Cette approche garde l’interface calme tout en maintenant l’aspect de marque.

Enfin, une palette de couleurs fiable diminue les obstacles : un contraste propre améliore l’accessibilité, tandis qu’un accent récurrent habitue l'œil à repérer immédiatement les liens, boutons et états interactifs.

20+ idées de palettes couleur pour portfolio (avec codes HEX)

1) Lin de minuit

HEX : #0b1320 #1f2a44 #f2efe8 #c7b8a6 #b46a55

Ambiance : raffiné, calme, éditorial

Idéal pour : maquette de page d'accueil portfolio UI 2D

Raffinées et calmes comme du lin sous la lumière nocturne d’un studio, ces teintes équilibrent les bleus d’encre profonds avec des neutres chauds et tactiles. Utilisez les teintes foncées pour les en-têtes et la navigation, puis laissez le lin et le sable structurer les sections et espaces blancs. La terracotta s’utilise mieux comme accent subtil sur boutons, tags ou liens clés. Astuce : gardez un fort contraste en associant le texte #0b1320 au fond #f2efe8 pour un aspect net, comme imprimé.

Exemple d’image de “lin de minuit” généré avec media.io

Media.io

Media.io est un studio IA en ligne pour créer et éditer vidéo, image et audio dans votre navigateur.

Essayez gratuitement dès maintenant

2) Béton de studio

HEX : #2b2d31 #5a6068 #d8dadd #f7f7f5 #ff6b4a

Ambiance : industriel, moderne, énergique

Idéal pour : affiche design graphique sur fond simple

Industrielles et modernes, ces teintes rappellent des murs de béton, une lumière douce et un marqueur néon dynamique. Structurez les layouts avec les gris pour la hiérarchie typographique et l’organisation, et laissez le blanc chaud ouvrir l’espace négatif. L’orange-rouge s’utilise au mieux comme élément central pour un appel à l’action ou un titre principal. Astuce : limitez l’accent à une ou deux formes pour préserver un aspect sophistiqué, sans tomber dans le “sportif”.

Exemple d’image de “béton de studio” généré avec media.io

3) Sauge de galerie

HEX : #1f2f2b #3f5f55 #a6b89a #e7e4d9 #c07a4b

Ambiance : terrestre, sélectionné, calme

Idéal pour : kit d’identité de marque sur fond simple

Terrestres et raffinés, ces verts et neutres chauds évoquent une galerie tranquille avec encadrements en bois naturel. Utilisez le vert-noir profond pour logos et titres, et laissez la sauge et l’avoine remplir fonds et panneaux. Le cuivre est parfait pour des sceaux, icônes ou une ligne de mise en valeur dans un kit de marque. Astuce : associez le cuivre à beaucoup d’espace #e7e4d9 pour un rendu premium.

Exemple d’image de “sauge de galerie” généré avec media.io

4) Encre et corail

HEX : #0d1b2a #1b263b #415a77 #e0e1dd #ff5d5d

Ambiance : sûr, épuré, contrasté

Idéal pour : maquette UI 2D page étude de cas

Sûres et épurées, les bleus encrés font penser à un blazer net, tandis que le corail apporte une touche créative moderne. Utilisez la teinte la plus sombre pour texte principal et navigation, et réservez le gris clair pour les fonds de section. Le corail se prête à une seule couleur d’action sur la UI, comme liens ou états de progression. Astuce : adoucissez les grands blocs sombres avec #415a77 pour éviter un aspect lourd en haut de page.

Exemple d’image de “encre et corail” généré avec media.io

5) Preuve de terracotta

HEX : #2a1f1a #6b3f2a #c56b45 #f3e9df #2f4f4f

Ambiance : artisanal, chaleureux, ancré

Idéal pour : maquette d’emballage réaliste en studio

Chaleureuses et ancrées comme l’argile, le café et le papier vieilli, cette association convient aux marques centrées sur l’artisanat. Utilisez la crème comme base d’emballage, puis superposez la terracotta pour les étiquettes et détails d’illustration. Le vert-bleu profond contraste efficacement pour listes d’ingrédients ou petits badges. Astuce : conservez la typographie en #2a1f1a pour la lisibilité et une finition premium artisanale.

Exemple d’image de “preuve de terracotta” généré avec media.io

6) Grille pêche douce

HEX : #2b2f3a #5d6472 #f6d6c9 #f8f4f0 #d0a37f

Ambiance : amical, aéré, subtil

Idéal pour : flyer événementiel design sur fond simple

Amicales et aérées, ces teintes rappellent du papier rosé, un crayon graphite et une lumière douce de studio. Laissez le presque-blanc occuper la majeure partie de la surface, et structurez avec les gris pour la typographie et les lignes de la grille. La pêche et le beige chaleureux rendent les dates, highlights ou petites icônes plus accessibles. Astuce : utilisez la pêche derrière les blocs de texte clés pour guider le regard sans surcharger.

Exemple d’image de “grille pêche douce” généré avec media.io

7) CV verre de mer

HEX : #0f1f2b #1f4d5a #5ea3a3 #d9f1ef #f4fbfa

Ambiance : frais, fiable, serein

Idéal pour : layout éditorial de page de CV

Fraîches et sereines, ces nuances bleu verre de mer évoquent la lumière côtière et l’eau limpide. Utilisez le bleu marine profond pour titres et texte, puis le turquoise pour diviseurs de section et petites icônes. L’aqua pâle et le presque-blanc maintiennent la page lisible et adaptée au contenu long. Astuce : réservez #5ea3a3 pour les barres de compétences ou timelines afin de garder la mise en page professionnelle et apaisée.

Exemple d’image de “CV verre de mer” généré avec media.io

8) Plan bronze

HEX : #0a1a2a #17324a #2b556e #b08d57 #f2ede3

Ambiance : premium, technique, composé

Idéal pour : maquette UI 2D tableau de bord

Haut de gamme et posé, cet ensemble évoque un plan dessiné à l’encre avec une règle bronze sur papier ivoire. Les bleus superposés créent une hiérarchie claire pour panneaux, graphiques et barres latérales sans être criards. Le bronze met en valeur les états actifs, métriques clé ou badges dans une palette centrée sur la crédibilité. Astuce : gardez le bronze sur des fonds foncés pour un maximum d’impact et un rendu soigné.

Exemple d’image de “plan bronze” généré avec media.io

9) Cahier prune

HEX : #1d1024 #40214e #7a3b74 #e4d3ea #f0b7a6

Ambiance : créatif, sombre, ludique

Idéal pour : carrousel graphique réseaux sociaux sur fond simple

Humeur changeante et espiègle, ces tons prune évoquent la marge d'un carnet esquissée à l'encre et au surligneur pastel. Utilisez le violet le plus foncé pour des titres percutants et laissez la lavande adoucir les panneaux secondaires et les légendes. L’accent pêche est idéal pour un élément répétitif, comme les numéros de diapositive ou une série d’icônes simples. Astuce : évitez de placer de longs paragraphes sur le violet le plus sombre ; réservez-le pour des textes courts et incisifs.

Exemple d’image d’un carnet prune générée avec media.io

10) Papier Forestier

HEX : #101d18 #244b3a #5f8c6d #dfe8d9 #f7f4ea

Ambiance : naturel, stable, réparateur

Idéal pour : illustration botanique à l'aquarelle

Naturels et réparateurs, ces verts rappellent des feuilles ombragées sur du papier fait main. Utilisez le vert forêt profond pour les contours et les titres, puis construisez le feuillage en tons moyens avec #244b3a et #5f8c6d. Les verts pâles et la crème chaude créent des fonds doux pour les cartes, diapos ou marges d’illustration. Astuce : gardez le vert le plus foncé pour de petites zones afin de préserver l’ambiance botanique et aérée.

Exemple d’image de papier forestier générée avec media.io

11) Accent Cobalt

HEX : #0b1020 #142a6e #2e5fff #d9e2ff #f2f4f8

Ambiance : tranchant, digital, énergique

Idéal pour : maquette section héros ui 2d

Tranchée et digitale, cette palette évoque le mode nuit avec une lueur de curseur bleu laser. Gardez la majorité des surfaces en gris doux et pervenche pâle pour une interface épurée. Utilisez le cobalt pour les actions principales, les onglets sélectionnés et les liens, tandis que le bleu marine foncé ancre les titres. Astuce : testez les dégradés de #142a6e à #2e5fff pour une bannière moderne sans ajouter d’autres couleurs.

Exemple d’image d’accent cobalt générée avec media.io

12) Mono Grès

HEX : #1b1b1b #4a4a4a #8a8a8a #d6d2c4 #faf7f0

Ambiance : minimal, intemporel, galerie

Idéal pour : mise en page magazine

Minimal et façon galerie, ces gris et tons sable évoquent la pierre, la mine de crayon et le papier d’archives. Utilisez le noir et l’anthracite pour la typographie, et comptez sur les neutres clairs et chauds pour les marges et les fonds. Le gris moyen convient aux légendes, notes et traits subtils pour guider le lecteur. Astuce : apportez de la texture avec du grain de papier ou un léger bruit plutôt qu’avec plus de couleurs.

Exemple d’image de mono grès générée avec media.io

13) Cerise sur Ardoise

HEX : #1a2433 #334155 #64748b #f1f5f9 #e11d48

Ambiance : moderne, affirmé, net

Idéal pour : maquette de page d’atterrissage produit ui 2d

Moderne et nette, les bleus ardoise instaurent un rythme régulier tandis que le rouge cerise ajoute une touche assurée. Utilisez le fond clair pour respirer et gardez les nuances ardoise pour la navigation, les cartes et les bordures discrètes. Pour des idées d’accords colorés professionnelles, la cerise fonctionne mieux en unique couleur d’action sur boutons et liens. Astuce : gardez le rouge éloigné des longs blocs de texte et réservez-le pour les micro-interactions et les mises en valeur.

Exemple d’image de cerise sur ardoise générée avec media.io

14) Menthe Aurore

HEX : #0e1b2a #224b46 #4fd1c5 #d9fff8 #fff7e6

Ambiance : frais, optimiste, lumineux

Idéal pour : écrans d’onboarding ui 2d

Fraîche et lumineuse, la menthe et le teal profond évoquent la lumière passant à travers le verre. Utilisez le marine pour le texte de base, puis laissez la menthe et l’aqua pâle porter les panneaux, cartes et formes d’illustration. La crème chaude vient subtilement équilibrer la fraîcheur pour éviter d’être trop froid. Astuce : gardez la menthe la plus vive pour les indicateurs de progression et états de réussite pour rendre l’onboarding gratifiant.

Exemple d’image de menthe aurore générée avec media.io

15) Toile Moka

HEX : #231b16 #4b342a #8c6a4a #d8c3a5 #f2efe9

Ambiance : chaleureux, artisanal, premium

Idéal pour : prise de vue studio réaliste d'une étiquette produit

Chaleureux et artisanal, ces bruns et crèmes rappellent le café torréfié, les carnets en cuir, et la toile écrue. Utilisez les teintes les plus foncées pour la typographie et les logos, puis apportez de la chaleur avec les bruns moyens sur les étiquettes et motifs. Les neutres pâles gardent la composition propre et haut de gamme pour les packagings ou lookbooks. Astuce : ajoutez un gaufrage subtil ou des effets feuilles métallisées dans les bruns moyens pour donner du relief sans introduire de nouvelles couleurs.

Exemple d’image de toile moka générée avec media.io

16) Sunset Type

HEX : #121826 #2a2f45 #ff8a5b #ffd2a6 #fff3e9

Ambiance : chaud, moderne, accueillant

Idéal pour : affiche typographique sur fond uni

Chaud et accueillant, ces tons évoquent la lumière du coucher de soleil sur un mur de studio sombre. Utilisez le duo indigo profond pour des titres audacieux et un alignement fort, puis superposez pêche et abricot pour les accents et formes secondaires. L’abricot pâle garde le fond doux et lisible, surtout pour des affiches ou diapos de couverture. Astuce : placez de l’abricot (#ffd2a6) derrière les titres pour créer instantanément une hiérarchie sans ajout graphique.

Exemple d’image de sunset type générée avec media.io

17) Lavande Givrée

HEX : #131a2a #2f3a5f #a3a6ff #e8e9ff #f7f7ff

Ambiance : froid, sophistiqué, futuriste

Idéal pour : maquette page paramètres ui 2d

Froide et raffinée, cette palette lavande évoque le verre dépoli et l’air d’hiver vif. Utilisez le navy le plus sombre pour les titres et interrupteurs, puis laissez le lilas doux remplir les fonds et cartes. Le pervenche vif est parfait pour les états sélectionnés et curseurs sans effet néon. Astuce : gardez les bordures subtiles (#e8e9ff) pour une interface aérée et moderne.

Exemple d’image de lavande givrée générée avec media.io

18) Cyanotype Vintage

HEX : #071a2a #0b3a53 #2c7da0 #a9d6e5 #eaf4f4

Ambiance : nostalgique, académique, océanique

Idéal pour : mise en page de couverture de magazine éditorial

Nostalgique et océanique, ces bleus rappellent les cyanotypes et les anciens atlas. Utilisez le navy profond pour les têtières et les blocs de texte forts, et gardez les bleus moyens pour sous-titres et appels visuels. Les nuances aqua pâles créent des espaces négatifs nets qui restent colorés, sans être blancs. Astuce : ajoutez des filets fins et des icônes en #2c7da0 pour une finition académique travaillée.

Exemple d’image de cyanotype vintage générée avec media.io

19) Registre Olive

HEX : #161c12 #3b4a2a #7c8a5b #e6e2d3 #c9a66b

Ambiance : patrimonial, terreux, fiable

Idéal pour : maquette set de papeterie en studio

Patrimonial et fiable, olive et kaki rappellent les anciens registres, sceaux de cire et toiles de livres patinées. Utilisez l’olive profond pour logos et titres, puis misez sur le parchemin pâle pour fonds et papiers. Pour une palette de couleurs classique, l’or mat devient un accent élégant pour filets, icônes ou sceaux. Astuce : gardez l’or discret et présent à un endroit par section pour un esprit d’archive authentique.

Exemple d’image de registre olive générée avec media.io

20) Code Quartz Rose

HEX : #1a1f2b #3b4252 #b48ead #e5d7e9 #f6f1f5

Ambiance : doux, intelligent, contemporain

Idéal pour : maquette section portfolio développeur ui 2d

Douce et intelligente, cette palette rappelle les éditeurs de code gris crépuscule réchauffés par une lumière quartz rose. Utilisez le duo charbon pour les blocs de code, navigation et titres, puis laissez les neutres blush porter les fonds de page. Le mauve s’impose pour tags, liens et données discrètes sans effet enfantin. Astuce : pour une palette portfolio lisible, placez le texte principal en #1a1f2b sur #f6f1f5 et gardez le mauve pour un seul poids d’accent.

Exemple d’image de code quartz rose générée avec media.io

21) Terre et Nuage

HEX : #1c2230 #3d4a5c #b7c3d0 #eef2f6 #c46a5a

Ambiance : équilibré, professionnel, accessible

Idéal pour : maquette page à propos ui 2d

Équilibrée et accessible, ce mélange rappelle le denim orageux avec de la terre cuite au soleil. Utilisez les bleu-gris foncés pour la structure et la typographie, puis laissez les tons nuage éclaircir grands blocs et cartes. La terre cuite devient un accent amical pour CTAs, repères de chronologie ou petites illus. Astuce : rendez les ombres subtiles et comptez sur #b7c3d0 pour les bordures afin de préserver la légèreté de la composition.

Exemple d’image de terre et nuage générée avec media.io

Quelles couleurs s’accordent avec un portfolio ?

Les nuances neutres constituent la colonne vertébrale de la plupart des palettes de portfolio car elles laissent vos exemples de travaux au centre. Pensez : encre/marine, charbon, blanc cassé, et gris doux pour des mises en page où lisibilité et hiérarchie priment.

Ajoutez ensuite une couleur d’accent qui signale l’interactivité et l’importance : boutons, liens, étiquettes, indicateurs. Corail, cobalt, menthe, bronze ou or atténué fonctionnent tous bien s’ils sont utilisés de façon cohérente.

Si vos projets sont visuellement variés, gardez votre palette de couleurs de portfolio sobre et laissez l’image apporter la diversité. Un fond stable + un seul accent semblent généralement plus haut de gamme que de multiples teintes en compétition.

Comment utiliser une palette de couleurs dans des designs réels

Commencez par attribuer des rôles, pas seulement des couleurs : un pour texte principal, un pour texte secondaire, un pour les surfaces (cartes/sections), un pour bordures, un pour accent/action. Cela rend votre palette cohérente d’une page à l’autre.

Utilisez le contraste de façon intentionnelle pour l’accessibilité : du texte sombre sur fond clair reste la solution idéale pour études de cas et CV. Réservez les couleurs vives à de petits moments UI comme onglets actifs, survols et surlignages.

Enfin, restez cohérent entre les composants : boutons, étiquettes, icônes, graphiques et mises en évidence doivent partager la même logique d’accent pour que l’ensemble du site semble conçu, pas décoré.

Créez des visuels de palettes pour portfolio avec l’IA

Si vous proposez un nouveau look pour votre site perso (ou créez un brand kit), générer des maquettes rapides permet de valider une palette avant une refonte complète. Un simple héros, une page d’étude de cas ou une mise en page CV suffit souvent à tester l’ambiance.

Avec Media.io, transformez vos idées de palette en visuels rapidement, puis itérez sur l’invite, la composition et la lumière jusqu’à ce que les couleurs conviennent à votre niche et votre public.

Essayez de créer un concept « mode clair » et un « mode sombre » en gardant la même couleur d’accent pour une identité visuelle homogène sur tous les appareils.

Suivant : Palette de couleurs Oxford Blue