{"id":240,"date":"2025-12-21T16:26:29","date_gmt":"2025-12-21T15:26:29","guid":{"rendered":"https:\/\/wp11.infocom.work\/?page_id=240"},"modified":"2025-12-21T16:41:37","modified_gmt":"2025-12-21T15:41:37","slug":"couleurs-palettes","status":"publish","type":"page","link":"https:\/\/wp11.infocom.work\/index.php\/ressources\/couleurs-palettes\/","title":{"rendered":"Couleurs &amp; palettes"},"content":{"rendered":"\n<!-- PAGE RESSOURCES \u2014 Couleurs & palettes (\u00e0 coller dans un bloc \u201cHTML personnalis\u00e9\u201d Gutenberg) -->\n<article>\n\n  <!-- HERO -->\n  <header style=\"padding:20px;border-radius:22px;overflow:hidden;border:1px solid #e8e8e8;background:\n    radial-gradient(circle at 15% 20%, rgba(31,79,255,.14) 0%, rgba(31,79,255,0) 60%),\n    radial-gradient(circle at 90% 80%, rgba(255,45,149,.14) 0%, rgba(255,45,149,0) 62%),\n    linear-gradient(135deg,#0b0b0f 0%, #141432 48%, #0b0b0f 100%);\n    color:#fff;\">\n    <p style=\"margin:0 0 6px 0;font:800 12px\/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;letter-spacing:.14em;text-transform:uppercase;opacity:.9;\">\n      Ressources \u2022 Couleurs &#038; palettes\n    <\/p>\n    <h1 style=\"margin:0;font:900 40px\/1.02 system-ui, -apple-system, Segoe UI, Roboto, Arial;letter-spacing:-.04em;color:#ffffff;\">\n  Tout pour choisir des couleurs qui claquent \u2014 sans ruiner la lisibilit\u00e9.\n<\/h1>\n    <p style=\"margin:12px 0 0 0;font:400 16px\/1.95 system-ui, -apple-system, Segoe UI, Roboto, Arial;opacity:.92;max-width:92ch;\">\n      Ici, tu trouveras des outils (palettes, harmonies, contrastes) + des mini-r\u00e8gles simples pour construire une palette coh\u00e9rente\n      pour une marque, un site ou un projet graphique.\n    <\/p>\n\n    <div style=\"margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;\">\n      <span style=\"padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);\n        font:700 12px\/1 system-ui;letter-spacing:.12em;text-transform:uppercase;\">Palettes<\/span>\n      <span style=\"padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);\n        font:700 12px\/1 system-ui;letter-spacing:.12em;text-transform:uppercase;\">Harmonies<\/span>\n      <span style=\"padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);\n        font:700 12px\/1 system-ui;letter-spacing:.12em;text-transform:uppercase;\">Contraste<\/span>\n      <span style=\"padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);\n        font:700 12px\/1 system-ui;letter-spacing:.12em;text-transform:uppercase;\">Export<\/span>\n    <\/div>\n  <\/header>\n\n  <!-- OUTILS (cartes cliquables) -->\n  <section style=\"max-width:96ch;margin:22px auto 0 auto;\">\n    <h2 style=\"margin:0 0 10px 0;font:900 22px\/1.15 system-ui, -apple-system, Segoe UI, Roboto, Arial;letter-spacing:-.03em;\">\n      Outils incontournables\n    <\/h2>\n    <p style=\"margin:0 0 14px 0;font:400 16px\/1.9 system-ui, -apple-system, Segoe UI, Roboto, Arial;color:#333;max-width:92ch;\">\n      Clique sur une ressource : tu peux g\u00e9n\u00e9rer une palette, v\u00e9rifier le contraste et exporter tes couleurs pour ton design system.\n    <\/p>\n\n    <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:14px;\">\n      \n      <!-- Adobe Color -->\n      <div style=\"border:1px solid #e8e8e8;border-radius:20px;background:#fff;padding:16px;\">\n        <p style=\"margin:0;font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">Palette &#038; harmonies<\/p>\n        <h3 style=\"margin:10px 0 0 0;font:900 18px\/1.2 system-ui;letter-spacing:-.02em;\">Adobe Color<\/h3>\n        <p style=\"margin:10px 0 0 0;font:400 15px\/1.9 system-ui;color:#333;\">\n          Harmonies (compl\u00e9mentaire, triade, analogues), extraction depuis une image, exploration de th\u00e8mes.\n        <\/p>\n        <p style=\"margin:12px 0 0 0;\">\n          <a href=\"https:\/\/color.adobe.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"\n             style=\"display:inline-block;padding:10px 12px;border-radius:14px;border:1px solid #e8e8e8;background:#fafafa;\n             font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#0b0b0f;text-decoration:none;\">\n            Ouvrir Adobe Color \u2197\n          <\/a>\n        <\/p>\n      <\/div>\n\n      <!-- Coolors -->\n      <div style=\"border:1px solid #e8e8e8;border-radius:20px;background:linear-gradient(180deg,#fff 0%,#fafafa 100%);padding:16px;\">\n        <p style=\"margin:0;font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">G\u00e9n\u00e9rateur rapide<\/p>\n        <h3 style=\"margin:10px 0 0 0;font:900 18px\/1.2 system-ui;letter-spacing:-.02em;\">Coolors<\/h3>\n        <p style=\"margin:10px 0 0 0;font:400 15px\/1.9 system-ui;color:#333;\">\n          G\u00e9n\u00e8re, verrouille, ajuste. Parfait pour sortir une palette en 2 minutes et l\u2019exporter en formats utiles.\n        <\/p>\n        <p style=\"margin:12px 0 0 0;\">\n          <a href=\"https:\/\/coolors.co\/\" target=\"_blank\" rel=\"noopener noreferrer\"\n             style=\"display:inline-block;padding:10px 12px;border-radius:14px;border:1px solid #e8e8e8;background:#fff;\n             font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#0b0b0f;text-decoration:none;\">\n            Ouvrir Coolors \u2197\n          <\/a>\n        <\/p>\n      <\/div>\n\n      <!-- Contrast checker -->\n      <div style=\"border:2px solid #0b0b0f;border-radius:20px;background:#fff;padding:16px;\">\n        <p style=\"margin:0;font:900 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#0b0b0f;\">Accessibilit\u00e9<\/p>\n        <h3 style=\"margin:10px 0 0 0;font:900 18px\/1.2 system-ui;letter-spacing:-.02em;text-transform:uppercase;\">\n          WebAIM Contrast Checker\n        <\/h3>\n        <p style=\"margin:10px 0 0 0;font:400 15px\/1.9 system-ui;color:#333;\">\n          V\u00e9rifie si ton texte est lisible (contraste). Indispensable pour les boutons, liens et texte long.\n        <\/p>\n        <p style=\"margin:12px 0 0 0;\">\n          <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener noreferrer\"\n             style=\"display:inline-block;padding:10px 12px;border-radius:14px;border:2px solid #0b0b0f;background:#0b0b0f;\n             font:900 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:none;\">\n            Tester le contraste \u2197\n          <\/a>\n        <\/p>\n      <\/div>\n\n      <!-- Palette extraction -->\n      <div style=\"border:1px solid #e8e8e8;border-radius:20px;background:#fff;padding:16px;\">\n        <p style=\"margin:0;font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">Image \u2192 palette<\/p>\n        <h3 style=\"margin:10px 0 0 0;font:900 18px\/1.2 system-ui;letter-spacing:-.02em;\">Color Hunt<\/h3>\n        <p style=\"margin:10px 0 0 0;font:400 15px\/1.9 system-ui;color:#333;\">\n          Galerie de palettes pr\u00eates \u00e0 l\u2019emploi, tr\u00e8s utile pour explorer vite des combinaisons \u201csafe\u201d.\n        <\/p>\n        <p style=\"margin:12px 0 0 0;\">\n          <a href=\"https:\/\/colorhunt.co\/\" target=\"_blank\" rel=\"noopener noreferrer\"\n             style=\"display:inline-block;padding:10px 12px;border-radius:14px;border:1px solid #e8e8e8;background:#fafafa;\n             font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#0b0b0f;text-decoration:none;\">\n            Explorer Color Hunt \u2197\n          <\/a>\n        <\/p>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- MINI GUIDE (r\u00e8gles) -->\n  <section style=\"max-width:96ch;margin:22px auto 0 auto;\">\n    <div style=\"border:1px solid #e8e8e8;border-radius:22px;background:#fff;padding:16px;\">\n      <h2 style=\"margin:0;font:900 22px\/1.15 system-ui, -apple-system, Segoe UI, Roboto, Arial;letter-spacing:-.03em;\">\n        Mini-guide : construire une palette qui marche\n      <\/h2>\n\n      <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;\">\n        <div style=\"border:1px solid #e8e8e8;border-radius:18px;background:#fafafa;padding:14px;\">\n          <p style=\"margin:0;font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">R\u00f4les<\/p>\n          <ul style=\"margin:10px 0 0 18px;font:400 16px\/1.9 system-ui;color:#333;\">\n            <li><strong>Neutres<\/strong> : fond + texte<\/li>\n            <li><strong>Primaire<\/strong> : actions (CTA)<\/li>\n            <li><strong>Secondaire<\/strong> : \u00e9l\u00e9ments de support<\/li>\n            <li><strong>Accent<\/strong> : d\u00e9tails \/ highlights<\/li>\n          <\/ul>\n        <\/div>\n\n        <div style=\"border:1px solid #e8e8e8;border-radius:18px;background:#fff;padding:14px;\">\n          <p style=\"margin:0;font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">R\u00e8gles rapides<\/p>\n          <ul style=\"margin:10px 0 0 18px;font:400 16px\/1.9 system-ui;color:#333;\">\n            <li>2\u20133 couleurs max + neutres<\/li>\n            <li>Accent satur\u00e9 = <strong>10%<\/strong> max<\/li>\n            <li>Texte long : contraste \u00e9lev\u00e9<\/li>\n            <li>Test contraste avant publication<\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <div style=\"margin-top:14px;border-radius:18px;border:1px solid #e8e8e8;background:#fafafa;padding:14px;\">\n        <p style=\"margin:0;font:700 14px\/1.8 system-ui;color:#333;\">\n          Astuce : si ta palette est \u201cbelle\u201d mais illisible, baisse la saturation des fonds et garde la couleur vive uniquement pour les actions.\n        <\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- EXEMPLES DE PALETTES (visuel) -->\n  <section style=\"max-width:96ch;margin:22px auto 0 auto;\">\n    <h2 style=\"margin:0 0 10px 0;font:900 22px\/1.15 system-ui, -apple-system, Segoe UI, Roboto, Arial;letter-spacing:-.03em;\">\n      Palettes pr\u00eates \u00e0 tester\n    <\/h2>\n\n    <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:14px;\">\n\n      <!-- Palette 1 -->\n      <div style=\"border:1px solid #e8e8e8;border-radius:22px;overflow:hidden;background:#fff;\">\n        <div style=\"padding:14px;background:#0b0b0f;color:#fff;\">\n          <p style=\"margin:0;font:900 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;opacity:.9;\">Moderne \/ Tech<\/p>\n          <p style=\"margin:8px 0 0 0;font:500 14px\/1.7 system-ui;opacity:.9;\">Neutres solides + bleu \u00e9lectrique<\/p>\n        <\/div>\n        <div style=\"display:grid;grid-template-columns:repeat(5,1fr);\">\n          <div style=\"padding:12px;background:#0B0B0F;color:#fff;font:700 11px\/1.2 system-ui;\">#0B0B0F<\/div>\n          <div style=\"padding:12px;background:#F6F7FB;font:700 11px\/1.2 system-ui;\">#F6F7FB<\/div>\n          <div style=\"padding:12px;background:#1F4FFF;color:#fff;font:700 11px\/1.2 system-ui;\">#1F4FFF<\/div>\n          <div style=\"padding:12px;background:#00D1FF;font:700 11px\/1.2 system-ui;\">#00D1FF<\/div>\n          <div style=\"padding:12px;background:#FF2D95;color:#fff;font:700 11px\/1.2 system-ui;\">#FF2D95<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Palette 2 -->\n      <div style=\"border:1px solid #e8e8e8;border-radius:22px;overflow:hidden;background:#fff;\">\n        <div style=\"padding:14px;background:linear-gradient(135deg,#145046,#0b0b0f);color:#fff;\">\n          <p style=\"margin:0;font:900 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;opacity:.9;\">\u00c9ditorial \/ Premium<\/p>\n          <p style=\"margin:8px 0 0 0;font:500 14px\/1.7 system-ui;opacity:.9;\">Verts sourds + ivoire + noir doux<\/p>\n        <\/div>\n        <div style=\"display:grid;grid-template-columns:repeat(5,1fr);\">\n          <div style=\"padding:12px;background:#145046;color:#fff;font:700 11px\/1.2 system-ui;\">#145046<\/div>\n          <div style=\"padding:12px;background:#FBF3E6;font:700 11px\/1.2 system-ui;\">#FBF3E6<\/div>\n          <div style=\"padding:12px;background:#1A1510;color:#fff;font:700 11px\/1.2 system-ui;\">#1A1510<\/div>\n          <div style=\"padding:12px;background:#D4C2A8;font:700 11px\/1.2 system-ui;\">#D4C2A8<\/div>\n          <div style=\"padding:12px;background:#B83B5E;color:#fff;font:700 11px\/1.2 system-ui;\">#B83B5E<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Palette 3 -->\n      <div style=\"border:1px solid #e8e8e8;border-radius:22px;overflow:hidden;background:#fff;\">\n        <div style=\"padding:14px;background:linear-gradient(135deg,#ff2d95,#b86bff,#00d1ff);color:#fff;\">\n          <p style=\"margin:0;font:900 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;opacity:.95;\">Cr\u00e9atif \/ N\u00e9on<\/p>\n          <p style=\"margin:8px 0 0 0;font:500 14px\/1.7 system-ui;opacity:.95;\">\u00c0 utiliser en accent + fonds calmes<\/p>\n        <\/div>\n        <div style=\"display:grid;grid-template-columns:repeat(5,1fr);\">\n          <div style=\"padding:12px;background:#0B0B0F;color:#fff;font:700 11px\/1.2 system-ui;\">#0B0B0F<\/div>\n          <div style=\"padding:12px;background:#FFFFFF;font:700 11px\/1.2 system-ui;\">#FFFFFF<\/div>\n          <div style=\"padding:12px;background:#FF2D95;color:#fff;font:700 11px\/1.2 system-ui;\">#FF2D95<\/div>\n          <div style=\"padding:12px;background:#B86BFF;color:#fff;font:700 11px\/1.2 system-ui;\">#B86BFF<\/div>\n          <div style=\"padding:12px;background:#00D1FF;font:700 11px\/1.2 system-ui;\">#00D1FF<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Palette 4 -->\n      <div style=\"border:1px solid #e8e8e8;border-radius:22px;overflow:hidden;background:#fff;\">\n        <div style=\"padding:14px;background:#fafafa;color:#0b0b0f;border-bottom:1px solid #e8e8e8;\">\n          <p style=\"margin:0;font:900 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">Minimal \/ Soft<\/p>\n          <p style=\"margin:8px 0 0 0;font:500 14px\/1.7 system-ui;color:#333;\">Neutres + accent l\u00e9ger (UI clean)<\/p>\n        <\/div>\n        <div style=\"display:grid;grid-template-columns:repeat(5,1fr);\">\n          <div style=\"padding:12px;background:#0B0B0F;color:#fff;font:700 11px\/1.2 system-ui;\">#0B0B0F<\/div>\n          <div style=\"padding:12px;background:#F2F4F8;font:700 11px\/1.2 system-ui;\">#F2F4F8<\/div>\n          <div style=\"padding:12px;background:#FFFFFF;font:700 11px\/1.2 system-ui;\">#FFFFFF<\/div>\n          <div style=\"padding:12px;background:#A7B3C7;font:700 11px\/1.2 system-ui;\">#A7B3C7<\/div>\n          <div style=\"padding:12px;background:#1F4FFF;color:#fff;font:700 11px\/1.2 system-ui;\">#1F4FFF<\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <!-- EXPORT \/ BONNES PRATIQUES (liens) -->\n  <section style=\"max-width:96ch;margin:22px auto 0 auto;\">\n    <div style=\"border:1px solid #e8e8e8;border-radius:22px;background:#fff;padding:16px;\">\n      <h2 style=\"margin:0;font:900 22px\/1.15 system-ui, -apple-system, Segoe UI, Roboto, Arial;letter-spacing:-.03em;\">\n        Bonus : export &#038; r\u00e9f\u00e9rences utiles\n      <\/h2>\n      <p style=\"margin:10px 0 0 0;font:400 16px\/1.9 system-ui;color:#333;max-width:92ch;\">\n        Pour garder une palette coh\u00e9rente sur tout le site, exporte tes couleurs et garde-les not\u00e9es (hex).\n        Voici quelques ressources pratiques :\n      <\/p>\n\n      <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;\">\n        <div style=\"border:1px solid #e8e8e8;border-radius:18px;background:#fafafa;padding:14px;\">\n          <p style=\"margin:0;font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">Palettes &#038; inspiration<\/p>\n          <ul style=\"margin:10px 0 0 18px;font:400 16px\/1.9 system-ui;color:#333;\">\n            <li><a href=\"https:\/\/color.adobe.com\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:#1f4fff;text-decoration:none;\">Adobe Color<\/a><\/li>\n            <li><a href=\"https:\/\/coolors.co\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:#1f4fff;text-decoration:none;\">Coolors<\/a><\/li>\n            <li><a href=\"https:\/\/colorhunt.co\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:#1f4fff;text-decoration:none;\">Color Hunt<\/a><\/li>\n          <\/ul>\n        <\/div>\n\n        <div style=\"border:1px solid #e8e8e8;border-radius:18px;background:#fff;padding:14px;\">\n          <p style=\"margin:0;font:800 12px\/1 system-ui;letter-spacing:.14em;text-transform:uppercase;color:#666;\">Lisibilit\u00e9 &#038; accessibilit\u00e9<\/p>\n          <ul style=\"margin:10px 0 0 18px;font:400 16px\/1.9 system-ui;color:#333;\">\n            <li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:#1f4fff;text-decoration:none;\">WebAIM Contrast Checker<\/a><\/li>\n            <li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"color:#1f4fff;text-decoration:none;\">WCAG : contraste minimum<\/a><\/li>\n          <\/ul>\n        <\/div>\n      <\/div>\n\n      <div style=\"margin-top:14px;border-radius:18px;border:1px solid #e8e8e8;background:#fafafa;padding:14px;\">\n        <p style=\"margin:0;font:700 14px\/1.8 system-ui;color:#333;\">\n          Tip rapide : choisis d\u2019abord tes <strong>neutres<\/strong> (fond + texte), puis une couleur primaire (CTA), puis un accent. Ne pars pas de \u201c5 couleurs flashy\u201d.\n        <\/p>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Ressources \u2022 Couleurs &#038; palettes Tout pour choisir des couleurs qui claquent \u2014 sans ruiner la lisibilit\u00e9. Ici, tu trouveras des outils (palettes, harmonies, contrastes) + des mini-r\u00e8gles simples pour construire une palette coh\u00e9rente pour une marque, un site ou un projet graphique. Palettes Harmonies Contraste Export Outils incontournables Clique sur une ressource : tu&#8230;<\/p>\n<p class=\"more-link\"><a href=\"https:\/\/wp11.infocom.work\/index.php\/ressources\/couleurs-palettes\/\" class=\"themebutton3\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":101,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-240","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":3,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages\/240\/revisions"}],"predecessor-version":[{"id":251,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages\/240\/revisions\/251"}],"up":[{"embeddable":true,"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/pages\/101"}],"wp:attachment":[{"href":"https:\/\/wp11.infocom.work\/index.php\/wp-json\/wp\/v2\/media?parent=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}