@gouvfr/dsfr-roller
Version:
Le module `dsfr-roller` permet de publier le site de documentation du Système de Design de l’État - DSFR
1,334 lines (1,309 loc) • 140 kB
HTML
<!-- saved from url=(0085)https://www.systeme-de-design.gouv.fr/uploads/palette_couleurs_accent_fd07bc7cf1.html -->
<html data-qb-installed="true"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Palette de couleurs d'accentuation- DSFR</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: #FFFFFF;
font-family: arial, sans-serif;
}
.array-sample {
display: flex;
flex-wrap: wrap;
}
.array-sample p {
margin: 10px 0 0;
}
.box-sample {
width: 210px;
padding: 10px;
margin: 10px;
box-shadow: 0 0 0 1px lightgray;
text-align: center;
font-size: 14px;
}
.color-box-sample--sm {
width: 100%;
height: 30px;
box-shadow: inset 0 0 0 1px lightgray;
background-color: var(--color-box);
margin: auto;
}
.box-children-sample {
display: flex;
}
.box-children-sample > div {
width: 100%;
}
.color-box-sample {
width: auto;
height: 100px;
box-shadow: inset 0 0 0 1px lightgray;
background-color: var(--color-box);
margin: auto;
}
</style>
<style type="text/css">.lf-progress {
-webkit-appearance: none;
-moz-apperance: none;
width: 100%;
/* margin: 0 10px; */
height: 4px;
border-radius: 3px;
cursor: pointer;
}
.lf-progress:focus {
outline: none;
border: none;
}
.lf-progress::-moz-range-track {
cursor: pointer;
background: none;
border: none;
outline: none;
}
.lf-progress::-webkit-slider-thumb {
-webkit-appearance: none !important;
height: 13px;
width: 13px;
border: 0;
border-radius: 50%;
background: #0fccce;
cursor: pointer;
}
.lf-progress::-moz-range-thumb {
-moz-appearance: none !important;
height: 13px;
width: 13px;
border: 0;
border-radius: 50%;
background: #0fccce;
cursor: pointer;
}
.lf-progress::-ms-track {
width: 100%;
height: 3px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
.lf-progress::-ms-fill-lower {
background: #ccc;
border-radius: 3px;
}
.lf-progress::-ms-fill-upper {
background: #ccc;
border-radius: 3px;
}
.lf-progress::-ms-thumb {
border: 0;
height: 15px;
width: 15px;
border-radius: 50%;
background: #0fccce;
cursor: pointer;
}
.lf-progress:focus::-ms-fill-lower {
background: #ccc;
}
.lf-progress:focus::-ms-fill-upper {
background: #ccc;
}
.lf-player-container :focus {
outline: 0;
}
.lf-popover {
position: relative;
}
.lf-popover-content {
display: inline-block;
position: absolute;
opacity: 1;
visibility: visible;
transform: translate(0, -10px);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
.lf-popover-content.hidden {
opacity: 0;
visibility: hidden;
transform: translate(0, 0px);
}
.lf-player-btn-container {
display: flex;
align-items: center;
}
.lf-player-btn {
cursor: pointer;
fill: #999;
width: 14px;
}
.lf-player-btn.active {
fill: #555;
}
.lf-popover {
position: relative;
}
.lf-popover-content {
display: inline-block;
position: absolute;
background-color: #ffffff;
opacity: 1;
transform: translate(0, -10px);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
padding: 10px;
}
.lf-popover-content.hidden {
opacity: 0;
visibility: hidden;
transform: translate(0, 0px);
}
.lf-arrow {
position: absolute;
z-index: -1;
content: '';
bottom: -9px;
border-style: solid;
border-width: 10px 10px 0px 10px;
}
.lf-left-align,
.lf-left-align .lfarrow {
left: 0;
right: unset;
}
.lf-right-align,
.lf-right-align .lf-arrow {
right: 0;
left: unset;
}
.lf-text-input {
border: 1px #ccc solid;
border-radius: 5px;
padding: 3px;
width: 60px;
margin: 0;
}
.lf-color-picker {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 90px;
}
.lf-color-selectors {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.lf-color-component {
display: flex;
flex-direction: row;
font-size: 12px;
align-items: center;
justify-content: center;
}
.lf-color-component strong {
width: 40px;
}
.lf-color-component input[type='range'] {
margin: 0 0 0 10px;
}
.lf-color-component input[type='number'] {
width: 50px;
margin: 0 0 0 10px;
}
.lf-color-preview {
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding-left: 5px;
}
.lf-preview {
height: 60px;
width: 60px;
}
.lf-popover-snapshot {
width: 150px;
}
.lf-popover-snapshot h5 {
margin: 5px 0 10px 0;
font-size: 0.75rem;
}
.lf-popover-snapshot a {
display: block;
text-decoration: none;
}
.lf-popover-snapshot a:before {
content: '⥼';
margin-right: 5px;
}
.lf-popover-snapshot .lf-note {
display: block;
margin-top: 10px;
color: #999;
}
.lf-player-controls > div {
margin-right: 5px;
margin-left: 5px;
}
.lf-player-controls > div:first-child {
margin-left: 0px;
}
.lf-player-controls > div:last-child {
margin-right: 0px;
}
</style></head>
<body>
<h3>Tilleul verveine (thème clair)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#B7A73F">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-main-707</b></p>
<p>#B7A73F<br>rgb(183,167,63)<br>hsl(52deg 48.8% 48.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#e3cf50"></div>
<p><b>hover</b><br>#e3cf50<br>rgb(227,207,80)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#f6e157"></div>
<p><b>active</b><br>#f6e157<br>rgb(246,225,87)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#66673D">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-sun-418</b></p>
<p>#66673D<br>rgb(102,103,61)<br>hsl(61.4deg 25.6% 32.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#929359"></div>
<p><b>hover</b><br>#929359<br>rgb(146,147,89)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#a7a967"></div>
<p><b>active</b><br>#a7a967<br>rgb(167,169,103)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#fef7da">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-975</b></p>
<p>#fef7da<br>rgb(254,247,218)<br>hsl(48.6deg 92.3% 92.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#fce552"></div>
<p><b>hover</b><br>#fce552<br>rgb(252,229,82)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ebd54c"></div>
<p><b>active</b><br>#ebd54c<br>rgb(235,213,76)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#fceeac">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-950</b></p>
<p>#fceeac<br>rgb(252,238,172)<br>hsl(49.8deg 93.5% 83.1%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#e8d45c"></div>
<p><b>hover</b><br>#e8d45c<br>rgb(232,212,92)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#d4c254"></div>
<p><b>active</b><br>#d4c254<br>rgb(212,194,84)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#fbe769">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-925</b></p>
<p>#fbe769<br>rgb(251,231,105)<br>hsl(51.6deg 95% 69.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#d7c655"></div>
<p><b>hover</b><br>#d7c655<br>rgb(215,198,85)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#c2b24c"></div>
<p><b>active</b><br>#c2b24c<br>rgb(194,178,76)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#e2cf58">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-850</b></p>
<p>#e2cf58<br>rgb(226,207,88)<br>hsl(51.8deg 70.4% 61.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#b7a846"></div>
<p><b>hover</b><br>#b7a846<br>rgb(183,168,70)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#a0923c"></div>
<p><b>active</b><br>#a0923c<br>rgb(160,146,60)</p>
</div>
</div>
</div>
</div>
<h3>Tilleul verveine (thème sombre)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#B7A73F">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-main-707</b></p>
<p>#B7A73F<br>rgb(183,167,63)<br>hsl(52deg 48.8% 48.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#e3cf50"></div>
<p><b>hover</b><br>#e3cf50<br>rgb(227,207,80)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#f6e157"></div>
<p><b>active</b><br>#f6e157<br>rgb(246,225,87)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#D8C634">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-moon-817</b></p>
<p>#D8C634<br>rgb(216,198,52)<br>hsl(53.4deg 67.8% 52.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#fee943"></div>
<p><b>hover</b><br>#fee943<br>rgb(254,233,67)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#fef1ab"></div>
<p><b>active</b><br>#fef1ab<br>rgb(254,241,171)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#3f3a20">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-200</b></p>
<p>#3f3a20<br>rgb(63,58,32)<br>hsl(50.5deg 32.8% 18.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#6a6239"></div>
<p><b>hover</b><br>#6a6239<br>rgb(106,98,57)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#807747"></div>
<p><b>active</b><br>#807747<br>rgb(128,119,71)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#2d2a1d">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-125</b></p>
<p>#2d2a1d<br>rgb(45,42,29)<br>hsl(49.5deg 21% 14.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#534f39"></div>
<p><b>hover</b><br>#534f39<br>rgb(83,79,57)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#696349"></div>
<p><b>active</b><br>#696349<br>rgb(105,99,73)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#272419">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-100</b></p>
<p>#272419<br>rgb(39,36,25)<br>hsl(49.5deg 22% 12.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#4c4734"></div>
<p><b>hover</b><br>#4c4734<br>rgb(76,71,52)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#615b44"></div>
<p><b>active</b><br>#615b44<br>rgb(97,91,68)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#201e14">
<div class="color-box-sample"></div>
<p><b>green-tilleul-verveine-75</b></p>
<p>#201e14<br>rgb(32,30,20)<br>hsl(49.5deg 23.5% 10.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#433f2e"></div>
<p><b>hover</b><br>#433f2e<br>rgb(67,63,46)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#57533d"></div>
<p><b>active</b><br>#57533d<br>rgb(87,83,61)</p>
</div>
</div>
</div>
</div>
<h3>Bourgeon (thème clair)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#68A532">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-main-640</b></p>
<p>#68A532<br>rgb(104,165,50)<br>hsl(91.8deg 53.5% 42.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#87d443"></div>
<p><b>hover</b><br>#87d443<br>rgb(135,212,67)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#95e94a"></div>
<p><b>active</b><br>#95e94a<br>rgb(149,233,74)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#447049">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-sun-425</b></p>
<p>#447049<br>rgb(68,112,73)<br>hsl(126.8deg 24.1% 35.3%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#639f6a"></div>
<p><b>hover</b><br>#639f6a<br>rgb(99,159,106)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#72b77a"></div>
<p><b>active</b><br>#72b77a<br>rgb(114,183,122)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#e6feda">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-975</b></p>
<p>#e6feda<br>rgb(230,254,218)<br>hsl(100.1deg 92.4% 92.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#a7fc62"></div>
<p><b>hover</b><br>#a7fc62<br>rgb(167,252,98)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#98ed4d"></div>
<p><b>active</b><br>#98ed4d<br>rgb(152,237,77)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#c9fcac">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-950</b></p>
<p>#c9fcac<br>rgb(201,252,172)<br>hsl(98deg 93.6% 83.1%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#9ae95d"></div>
<p><b>hover</b><br>#9ae95d<br>rgb(154,233,93)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#8dd555"></div>
<p><b>active</b><br>#8dd555<br>rgb(141,213,85)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#a9fb68">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-925</b></p>
<p>#a9fb68<br>rgb(169,251,104)<br>hsl(93.7deg 95.1% 69.7%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#8ed654"></div>
<p><b>hover</b><br>#8ed654<br>rgb(142,214,84)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#7fc04b"></div>
<p><b>active</b><br>#7fc04b<br>rgb(127,192,75)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#95e257">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-850</b></p>
<p>#95e257<br>rgb(149,226,87)<br>hsl(93.2deg 70.5% 61.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#77b645"></div>
<p><b>hover</b><br>#77b645<br>rgb(119,182,69)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#679e3b"></div>
<p><b>active</b><br>#679e3b<br>rgb(103,158,59)</p>
</div>
</div>
</div>
</div>
<h3>Bourgeon (thème sombre)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#68A532">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-main-640</b></p>
<p>#68A532<br>rgb(104,165,50)<br>hsl(91.8deg 53.5% 42.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#87d443"></div>
<p><b>hover</b><br>#87d443<br>rgb(135,212,67)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#95e94a"></div>
<p><b>active</b><br>#95e94a<br>rgb(149,233,74)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#99C221">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-moon-759</b></p>
<p>#99C221<br>rgb(153,194,33)<br>hsl(75.3deg 70.9% 44.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#baec2a"></div>
<p><b>hover</b><br>#baec2a<br>rgb(186,236,42)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#c9fd2e"></div>
<p><b>active</b><br>#c9fd2e<br>rgb(201,253,46)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#2a401a">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-200</b></p>
<p>#2a401a<br>rgb(42,64,26)<br>hsl(95deg 42.1% 17.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#496b30"></div>
<p><b>hover</b><br>#496b30<br>rgb(73,107,48)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#5a833c"></div>
<p><b>active</b><br>#5a833c<br>rgb(90,131,60)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#232d1d">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-125</b></p>
<p>#232d1d<br>rgb(35,45,29)<br>hsl(98.5deg 21.2% 14.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#435339"></div>
<p><b>hover</b><br>#435339<br>rgb(67,83,57)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#556949"></div>
<p><b>active</b><br>#556949<br>rgb(85,105,73)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#1e2719">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-100</b></p>
<p>#1e2719<br>rgb(30,39,25)<br>hsl(98.5deg 22.2% 12.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3d4c34"></div>
<p><b>hover</b><br>#3d4c34<br>rgb(61,76,52)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4e6144"></div>
<p><b>active</b><br>#4e6144<br>rgb(78,97,68)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#182014">
<div class="color-box-sample"></div>
<p><b>green-bourgeon-75</b></p>
<p>#182014<br>rgb(24,32,20)<br>hsl(98.5deg 23.7% 10.1%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#35432e"></div>
<p><b>hover</b><br>#35432e<br>rgb(53,67,46)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#46573d"></div>
<p><b>active</b><br>#46573d<br>rgb(70,87,61)</p>
</div>
</div>
</div>
</div>
<h3>Émeraude (thème clair)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#00A95F">
<div class="color-box-sample"></div>
<p><b>green-emeraude-main-632</b></p>
<p>#00A95F<br>rgb(0,169,95)<br>hsl(153.7deg 100% 33.1%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#00e180"></div>
<p><b>hover</b><br>#00e180<br>rgb(0,225,128)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#00fb90"></div>
<p><b>active</b><br>#00fb90<br>rgb(0,251,144)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#297254">
<div class="color-box-sample"></div>
<p><b>green-emeraude-sun-425</b></p>
<p>#297254<br>rgb(41,114,84)<br>hsl(155.5deg 47% 30.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3ea47a"></div>
<p><b>hover</b><br>#3ea47a<br>rgb(62,164,122)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#49bc8d"></div>
<p><b>active</b><br>#49bc8d<br>rgb(73,188,141)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#e3fdeb">
<div class="color-box-sample"></div>
<p><b>green-emeraude-975</b></p>
<p>#e3fdeb<br>rgb(227,253,235)<br>hsl(138.2deg 84.3% 94.1%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#94f9b9"></div>
<p><b>hover</b><br>#94f9b9<br>rgb(148,249,185)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#6df1a3"></div>
<p><b>active</b><br>#6df1a3<br>rgb(109,241,163)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#c3fad5">
<div class="color-box-sample"></div>
<p><b>green-emeraude-950</b></p>
<p>#c3fad5<br>rgb(195,250,213)<br>hsl(139.4deg 85.8% 87.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#77eda5"></div>
<p><b>hover</b><br>#77eda5<br>rgb(119,237,165)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#6dd897"></div>
<p><b>active</b><br>#6dd897<br>rgb(109,216,151)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#9ef9be">
<div class="color-box-sample"></div>
<p><b>green-emeraude-925</b></p>
<p>#9ef9be<br>rgb(158,249,190)<br>hsl(141.2deg 87.5% 79.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#69df97"></div>
<p><b>hover</b><br>#69df97<br>rgb(105,223,151)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#5ec988"></div>
<p><b>active</b><br>#5ec988<br>rgb(94,201,136)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#6fe49d">
<div class="color-box-sample"></div>
<p><b>green-emeraude-850</b></p>
<p>#6fe49d<br>rgb(111,228,157)<br>hsl(143.6deg 68.7% 66.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#58b77d"></div>
<p><b>hover</b><br>#58b77d<br>rgb(88,183,125)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4b9f6c"></div>
<p><b>active</b><br>#4b9f6c<br>rgb(75,159,108)</p>
</div>
</div>
</div>
</div>
<h3>Émeraude (thème sombre)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#00A95F">
<div class="color-box-sample"></div>
<p><b>green-emeraude-main-632</b></p>
<p>#00A95F<br>rgb(0,169,95)<br>hsl(153.7deg 100% 33.1%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#00e180"></div>
<p><b>hover</b><br>#00e180<br>rgb(0,225,128)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#00fb90"></div>
<p><b>active</b><br>#00fb90<br>rgb(0,251,144)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#34CB6A">
<div class="color-box-sample"></div>
<p><b>green-emeraude-moon-753</b></p>
<p>#34CB6A<br>rgb(52,203,106)<br>hsl(141.5deg 59.2% 50%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#42fb84"></div>
<p><b>hover</b><br>#42fb84<br>rgb(66,251,132)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#80fda3"></div>
<p><b>active</b><br>#80fda3<br>rgb(128,253,163)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#21402c">
<div class="color-box-sample"></div>
<p><b>green-emeraude-200</b></p>
<p>#21402c<br>rgb(33,64,44)<br>hsl(142.2deg 32.8% 19%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3b6c4c"></div>
<p><b>hover</b><br>#3b6c4c<br>rgb(59,108,76)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#49835e"></div>
<p><b>active</b><br>#49835e<br>rgb(73,131,94)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#1e2e23">
<div class="color-box-sample"></div>
<p><b>green-emeraude-125</b></p>
<p>#1e2e23<br>rgb(30,46,35)<br>hsl(140.2deg 21.1% 14.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3b5543"></div>
<p><b>hover</b><br>#3b5543<br>rgb(59,85,67)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4b6b55"></div>
<p><b>active</b><br>#4b6b55<br>rgb(75,107,85)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#19271e">
<div class="color-box-sample"></div>
<p><b>green-emeraude-100</b></p>
<p>#19271e<br>rgb(25,39,30)<br>hsl(140.2deg 22% 12.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#344c3d"></div>
<p><b>hover</b><br>#344c3d<br>rgb(52,76,61)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#44624f"></div>
<p><b>active</b><br>#44624f<br>rgb(68,98,79)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#142018">
<div class="color-box-sample"></div>
<p><b>green-emeraude-75</b></p>
<p>#142018<br>rgb(20,32,24)<br>hsl(140.2deg 23.5% 10.3%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#2e4335"></div>
<p><b>hover</b><br>#2e4335<br>rgb(46,67,53)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#3d5846"></div>
<p><b>active</b><br>#3d5846<br>rgb(61,88,70)</p>
</div>
</div>
</div>
</div>
<h3>Menthe (thème clair)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#009081">
<div class="color-box-sample"></div>
<p><b>green-menthe-main-548</b></p>
<p>#009081<br>rgb(0,144,129)<br>hsl(173.7deg 100% 28.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#00c7b3"></div>
<p><b>hover</b><br>#00c7b3<br>rgb(0,199,179)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#00e2cb"></div>
<p><b>active</b><br>#00e2cb<br>rgb(0,226,203)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#37635f">
<div class="color-box-sample"></div>
<p><b>green-menthe-sun-373</b></p>
<p>#37635f<br>rgb(55,99,95)<br>hsl(174.5deg 28.6% 30.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#53918c"></div>
<p><b>hover</b><br>#53918c<br>rgb(83,145,140)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#62a9a2"></div>
<p><b>active</b><br>#62a9a2<br>rgb(98,169,162)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#dffdf7">
<div class="color-box-sample"></div>
<p><b>green-menthe-975</b></p>
<p>#dffdf7<br>rgb(223,253,247)<br>hsl(168deg 86% 93.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#84f9e7"></div>
<p><b>hover</b><br>#84f9e7<br>rgb(132,249,231)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#70ebd8"></div>
<p><b>active</b><br>#70ebd8<br>rgb(112,235,216)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#bafaee">
<div class="color-box-sample"></div>
<p><b>green-menthe-950</b></p>
<p>#bafaee<br>rgb(186,250,238)<br>hsl(169deg 87.3% 85.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#79e7d5"></div>
<p><b>hover</b><br>#79e7d5<br>rgb(121,231,213)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#6fd3c3"></div>
<p><b>active</b><br>#6fd3c3<br>rgb(111,211,195)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#8bf8e7">
<div class="color-box-sample"></div>
<p><b>green-menthe-925</b></p>
<p>#8bf8e7<br>rgb(139,248,231)<br>hsl(170.3deg 88.9% 76%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#6ed5c5"></div>
<p><b>hover</b><br>#6ed5c5<br>rgb(110,213,197)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#62bfb1"></div>
<p><b>active</b><br>#62bfb1<br>rgb(98,191,177)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#73e0cf">
<div class="color-box-sample"></div>
<p><b>green-menthe-850</b></p>
<p>#73e0cf<br>rgb(115,224,207)<br>hsl(170.6deg 63.8% 66.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#5bb5a7"></div>
<p><b>hover</b><br>#5bb5a7<br>rgb(91,181,167)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4f9d91"></div>
<p><b>active</b><br>#4f9d91<br>rgb(79,157,145)</p>
</div>
</div>
</div>
</div>
<h3>Menthe (thème sombre)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#009081">
<div class="color-box-sample"></div>
<p><b>green-menthe-main-548</b></p>
<p>#009081<br>rgb(0,144,129)<br>hsl(173.7deg 100% 28.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#00c7b3"></div>
<p><b>hover</b><br>#00c7b3<br>rgb(0,199,179)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#00e2cb"></div>
<p><b>active</b><br>#00e2cb<br>rgb(0,226,203)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#21AB8E">
<div class="color-box-sample"></div>
<p><b>green-menthe-moon-652</b></p>
<p>#21AB8E<br>rgb(33,171,142)<br>hsl(167.4deg 67.6% 40%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#2eddb8"></div>
<p><b>hover</b><br>#2eddb8<br>rgb(46,221,184)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#34f4cc"></div>
<p><b>active</b><br>#34f4cc<br>rgb(52,244,204)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#223f3a">
<div class="color-box-sample"></div>
<p><b>green-menthe-200</b></p>
<p>#223f3a<br>rgb(34,63,58)<br>hsl(170deg 30.1% 19%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3d6a62"></div>
<p><b>hover</b><br>#3d6a62<br>rgb(61,106,98)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4b8178"></div>
<p><b>active</b><br>#4b8178<br>rgb(75,129,120)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#1f2d2a">
<div class="color-box-sample"></div>
<p><b>green-menthe-125</b></p>
<p>#1f2d2a<br>rgb(31,45,42)<br>hsl(169deg 18.9% 14.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3c534e"></div>
<p><b>hover</b><br>#3c534e<br>rgb(60,83,78)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4d6963"></div>
<p><b>active</b><br>#4d6963<br>rgb(77,105,99)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#1a2624">
<div class="color-box-sample"></div>
<p><b>green-menthe-100</b></p>
<p>#1a2624<br>rgb(26,38,36)<br>hsl(169deg 19.8% 12.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#364b47"></div>
<p><b>hover</b><br>#364b47<br>rgb(54,75,71)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#46605b"></div>
<p><b>active</b><br>#46605b<br>rgb(70,96,91)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#15201e">
<div class="color-box-sample"></div>
<p><b>green-menthe-75</b></p>
<p>#15201e<br>rgb(21,32,30)<br>hsl(169deg 21.1% 10.3%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#30433f"></div>
<p><b>hover</b><br>#30433f<br>rgb(48,67,63)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#3f5753"></div>
<p><b>active</b><br>#3f5753<br>rgb(63,87,83)</p>
</div>
</div>
</div>
</div>
<h3>Archipel (thème clair)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#009099">
<div class="color-box-sample"></div>
<p><b>green-archipel-main-557</b></p>
<p>#009099<br>rgb(0,144,153)<br>hsl(183.5deg 100% 30%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#00c6d2"></div>
<p><b>hover</b><br>#00c6d2<br>rgb(0,198,210)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#00e0ee"></div>
<p><b>active</b><br>#00e0ee<br>rgb(0,224,238)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#006A6F">
<div class="color-box-sample"></div>
<p><b>green-archipel-sun-391</b></p>
<p>#006A6F<br>rgb(0,106,111)<br>hsl(182.7deg 100% 21.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#009fa7"></div>
<p><b>hover</b><br>#009fa7<br>rgb(0,159,167)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#00bbc3"></div>
<p><b>active</b><br>#00bbc3<br>rgb(0,187,195)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#e5fbfd">
<div class="color-box-sample"></div>
<p><b>green-archipel-975</b></p>
<p>#e5fbfd<br>rgb(229,251,253)<br>hsl(187deg 88.9% 94.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#99f2f8"></div>
<p><b>hover</b><br>#99f2f8<br>rgb(153,242,248)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#73e9f0"></div>
<p><b>active</b><br>#73e9f0<br>rgb(115,233,240)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#c7f6fc">
<div class="color-box-sample"></div>
<p><b>green-archipel-950</b></p>
<p>#c7f6fc<br>rgb(199,246,252)<br>hsl(186.6deg 89.6% 88.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#64ecf8"></div>
<p><b>hover</b><br>#64ecf8<br>rgb(100,236,248)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#5bd8e3"></div>
<p><b>active</b><br>#5bd8e3<br>rgb(91,216,227)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#a6f2fa">
<div class="color-box-sample"></div>
<p><b>green-archipel-925</b></p>
<p>#a6f2fa<br>rgb(166,242,250)<br>hsl(186deg 90.4% 81.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#62dbe5"></div>
<p><b>hover</b><br>#62dbe5<br>rgb(98,219,229)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#58c5cf"></div>
<p><b>active</b><br>#58c5cf<br>rgb(88,197,207)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#60e0eb">
<div class="color-box-sample"></div>
<p><b>green-archipel-850</b></p>
<p>#60e0eb<br>rgb(96,224,235)<br>hsl(184.9deg 77.6% 64.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#4cb4bd"></div>
<p><b>hover</b><br>#4cb4bd<br>rgb(76,180,189)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#419ca4"></div>
<p><b>active</b><br>#419ca4<br>rgb(65,156,164)</p>
</div>
</div>
</div>
</div>
<h3>Archipel (thème sombre)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#009099">
<div class="color-box-sample"></div>
<p><b>green-archipel-main-557</b></p>
<p>#009099<br>rgb(0,144,153)<br>hsl(183.5deg 100% 30%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#00c6d2"></div>
<p><b>hover</b><br>#00c6d2<br>rgb(0,198,210)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#00e0ee"></div>
<p><b>active</b><br>#00e0ee<br>rgb(0,224,238)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#34BAB5">
<div class="color-box-sample"></div>
<p><b>green-archipel-moon-716</b></p>
<p>#34BAB5<br>rgb(52,186,181)<br>hsl(177.8deg 56.3% 46.7%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#43e9e2"></div>
<p><b>hover</b><br>#43e9e2<br>rgb(67,233,226)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4cfdf6"></div>
<p><b>active</b><br>#4cfdf6<br>rgb(76,253,246)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#233e41">
<div class="color-box-sample"></div>
<p><b>green-archipel-200</b></p>
<p>#233e41<br>rgb(35,62,65)<br>hsl(185.7deg 30.6% 19.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3e686d"></div>
<p><b>hover</b><br>#3e686d<br>rgb(62,104,109)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4d7f85"></div>
<p><b>active</b><br>#4d7f85<br>rgb(77,127,133)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#1f2c2e">
<div class="color-box-sample"></div>
<p><b>green-archipel-125</b></p>
<p>#1f2c2e<br>rgb(31,44,46)<br>hsl(186.3deg 19.3% 15.1%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3c5255"></div>
<p><b>hover</b><br>#3c5255<br>rgb(60,82,85)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4d676b"></div>
<p><b>active</b><br>#4d676b<br>rgb(77,103,107)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#1a2628">
<div class="color-box-sample"></div>
<p><b>green-archipel-100</b></p>
<p>#1a2628<br>rgb(26,38,40)<br>hsl(186.3deg 20.2% 12.9%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#364a4e"></div>
<p><b>hover</b><br>#364a4e<br>rgb(54,74,78)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#465f63"></div>
<p><b>active</b><br>#465f63<br>rgb(70,95,99)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#152021">
<div class="color-box-sample"></div>
<p><b>green-archipel-75</b></p>
<p>#152021<br>rgb(21,32,33)<br>hsl(186.3deg 21.6% 10.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#2f4345"></div>
<p><b>hover</b><br>#2f4345<br>rgb(47,67,69)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#3f5759"></div>
<p><b>active</b><br>#3f5759<br>rgb(63,87,89)</p>
</div>
</div>
</div>
</div>
<h3>Écume (thème clair)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#465F9D">
<div class="color-box-sample"></div>
<p><b>blue-ecume-main-400</b></p>
<p>#465F9D<br>rgb(70,95,157)<br>hsl(222.8deg 38.3% 44.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#6f89d1"></div>
<p><b>hover</b><br>#6f89d1<br>rgb(111,137,209)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#8b9eda"></div>
<p><b>active</b><br>#8b9eda<br>rgb(139,158,218)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#2F4077">
<div class="color-box-sample"></div>
<p><b>blue-ecume-sun-247</b></p>
<p>#2F4077<br>rgb(47,64,119)<br>hsl(225.8deg 43.4% 32.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#4e68bb"></div>
<p><b>hover</b><br>#4e68bb<br>rgb(78,104,187)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#667dcf"></div>
<p><b>active</b><br>#667dcf<br>rgb(102,125,207)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#f4f6fe">
<div class="color-box-sample"></div>
<p><b>blue-ecume-975</b></p>
<p>#f4f6fe<br>rgb(244,246,254)<br>hsl(228.2deg 88.1% 97.7%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#d7dffb"></div>
<p><b>hover</b><br>#d7dffb<br>rgb(215,223,251)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#c3cffa"></div>
<p><b>active</b><br>#c3cffa<br>rgb(195,207,250)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#e9edfe">
<div class="color-box-sample"></div>
<p><b>blue-ecume-950</b></p>
<p>#e9edfe<br>rgb(233,237,254)<br>hsl(227.9deg 88.3% 95.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#c5d0fc"></div>
<p><b>hover</b><br>#c5d0fc<br>rgb(197,208,252)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#adbffc"></div>
<p><b>active</b><br>#adbffc<br>rgb(173,191,252)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#dee5fd">
<div class="color-box-sample"></div>
<p><b>blue-ecume-925</b></p>
<p>#dee5fd<br>rgb(222,229,253)<br>hsl(227.6deg 88.4% 93.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#b4c5fb"></div>
<p><b>hover</b><br>#b4c5fb<br>rgb(180,197,251)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#99b3f9"></div>
<p><b>active</b><br>#99b3f9<br>rgb(153,179,249)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#bfccfb">
<div class="color-box-sample"></div>
<p><b>blue-ecume-850</b></p>
<p>#bfccfb<br>rgb(191,204,251)<br>hsl(226.6deg 88.8% 86.7%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#8ba7f8"></div>
<p><b>hover</b><br>#8ba7f8<br>rgb(139,167,248)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#6b93f6"></div>
<p><b>active</b><br>#6b93f6<br>rgb(107,147,246)</p>
</div>
</div>
</div>
</div>
<h3>Écume (thème sombre)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#465F9D">
<div class="color-box-sample"></div>
<p><b>blue-ecume-main-400</b></p>
<p>#465F9D<br>rgb(70,95,157)<br>hsl(222.8deg 38.3% 44.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#6f89d1"></div>
<p><b>hover</b><br>#6f89d1<br>rgb(111,137,209)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#8b9eda"></div>
<p><b>active</b><br>#8b9eda<br>rgb(139,158,218)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#869ECE">
<div class="color-box-sample"></div>
<p><b>blue-ecume-moon-675</b></p>
<p>#869ECE<br>rgb(134,158,206)<br>hsl(220deg 42.4% 66.7%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#b8c5e2"></div>
<p><b>hover</b><br>#b8c5e2<br>rgb(184,197,226)</p>
</div>
<div>