@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,029 lines (1,004 loc) • 36.5 kB
HTML
<!-- saved from url=(0086)https://www.systeme-de-design.gouv.fr/uploads/palette_couleurs_systeme_f298773785.html -->
<html data-qb-installed="true"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Palette de couleurs systèmes- 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 ;
height: 13px;
width: 13px;
border: 0;
border-radius: 50%;
background: #0fccce;
cursor: pointer;
}
.lf-progress::-moz-range-thumb {
-moz-appearance: none ;
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>Info (thème clair)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#0078f3">
<div class="color-box-sample"></div>
<p><b>info-main-525</b></p>
<p>#0078f3<br>rgb(0,120,243)<br>hsl(210.4deg 100% 47.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#6196ff"></div>
<p><b>hover</b><br>#6196ff<br>rgb(97,150,255)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#85a9ff"></div>
<p><b>active</b><br>#85a9ff<br>rgb(133,169,255)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#0063cb">
<div class="color-box-sample"></div>
<p><b>info-425</b></p>
<p>#0063cb<br>rgb(0,99,203)<br>hsl(210.8deg 100% 39.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3b87ff"></div>
<p><b>hover</b><br>#3b87ff<br>rgb(59,135,255)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#6798ff"></div>
<p><b>active</b><br>#6798ff<br>rgb(103,152,255)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#f4f6ff">
<div class="color-box-sample"></div>
<p><b>info-975</b></p>
<p>#f4f6ff<br>rgb(244,246,255)<br>hsl(227.2deg 100% 97.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#d6deff"></div>
<p><b>hover</b><br>#d6deff<br>rgb(214,222,255)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#c2cfff"></div>
<p><b>active</b><br>#c2cfff<br>rgb(194,207,255)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#e8edff">
<div class="color-box-sample"></div>
<p><b>info-950</b></p>
<p>#e8edff<br>rgb(232,237,255)<br>hsl(226.9deg 100% 95.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#c2d1ff"></div>
<p><b>hover</b><br>#c2d1ff<br>rgb(194,209,255)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#a9bfff"></div>
<p><b>active</b><br>#a9bfff<br>rgb(169,191,255)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#dde5ff">
<div class="color-box-sample"></div>
<p><b>info-925</b></p>
<p>#dde5ff<br>rgb(221,229,255)<br>hsl(226.5deg 100% 93.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#b1c6ff"></div>
<p><b>hover</b><br>#b1c6ff<br>rgb(177,198,255)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#95b4ff"></div>
<p><b>active</b><br>#95b4ff<br>rgb(149,180,255)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#bccdff">
<div class="color-box-sample"></div>
<p><b>info-850</b></p>
<p>#bccdff<br>rgb(188,205,255)<br>hsl(225.3deg 100% 86.9%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#83a9ff"></div>
<p><b>hover</b><br>#83a9ff<br>rgb(131,169,255)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#5f96ff"></div>
<p><b>active</b><br>#5f96ff<br>rgb(95,150,255)</p>
</div>
</div>
</div>
</div>
<h3>Info (thème sombre)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#0078f3">
<div class="color-box-sample"></div>
<p><b>info-main-525</b></p>
<p>#0078f3<br>rgb(0,120,243)<br>hsl(210.4deg 100% 47.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#6196ff"></div>
<p><b>hover</b><br>#6196ff<br>rgb(97,150,255)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#85a9ff"></div>
<p><b>active</b><br>#85a9ff<br>rgb(133,169,255)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#518fff">
<div class="color-box-sample"></div>
<p><b>info-625</b></p>
<p>#518fff<br>rgb(81,143,255)<br>hsl(218.7deg 100% 65.9%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#98b4ff"></div>
<p><b>hover</b><br>#98b4ff<br>rgb(152,180,255)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#b4c7ff"></div>
<p><b>active</b><br>#b4c7ff<br>rgb(180,199,255)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#273961">
<div class="color-box-sample"></div>
<p><b>info-200</b></p>
<p>#273961<br>rgb(39,57,97)<br>hsl(221.4deg 42.4% 26.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#45619f"></div>
<p><b>hover</b><br>#45619f<br>rgb(69,97,159)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#5576c0"></div>
<p><b>active</b><br>#5576c0<br>rgb(85,118,192)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#222a3f">
<div class="color-box-sample"></div>
<p><b>info-125</b></p>
<p>#222a3f<br>rgb(34,42,63)<br>hsl(223.7deg 30.2% 18.9%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#414e71"></div>
<p><b>hover</b><br>#414e71<br>rgb(65,78,113)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#53638d"></div>
<p><b>active</b><br>#53638d<br>rgb(83,99,141)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#1d2437">
<div class="color-box-sample"></div>
<p><b>info-100</b></p>
<p>#1d2437<br>rgb(29,36,55)<br>hsl(223.7deg 31.3% 16.3%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3b4767"></div>
<p><b>hover</b><br>#3b4767<br>rgb(59,71,103)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4c5b83"></div>
<p><b>active</b><br>#4c5b83<br>rgb(76,91,131)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#171d2e">
<div class="color-box-sample"></div>
<p><b>info-75</b></p>
<p>#171d2e<br>rgb(23,29,46)<br>hsl(223.7deg 32.9% 13.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#333e5c"></div>
<p><b>hover</b><br>#333e5c<br>rgb(51,62,92)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#445177"></div>
<p><b>active</b><br>#445177<br>rgb(68,81,119)</p>
</div>
</div>
</div>
</div>
<h3>Succès (thème clair)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#1f8d49">
<div class="color-box-sample"></div>
<p><b>success-main-525</b></p>
<p>#1f8d49<br>rgb(31,141,73)<br>hsl(143deg 63.5% 33.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#2ec166"></div>
<p><b>hover</b><br>#2ec166<br>rgb(46,193,102)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#36db75"></div>
<p><b>active</b><br>#36db75<br>rgb(54,219,117)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#18753c">
<div class="color-box-sample"></div>
<p><b>success-425</b></p>
<p>#18753c<br>rgb(24,117,60)<br>hsl(143deg 65.5% 27.7%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#27a959"></div>
<p><b>hover</b><br>#27a959<br>rgb(39,169,89)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#2fc368"></div>
<p><b>active</b><br>#2fc368<br>rgb(47,195,104)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#dffee6">
<div class="color-box-sample"></div>
<p><b>success-975</b></p>
<p>#dffee6<br>rgb(223,254,230)<br>hsl(133.6deg 96% 93.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#8afcab"></div>
<p><b>hover</b><br>#8afcab<br>rgb(138,252,171)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4efb8d"></div>
<p><b>active</b><br>#4efb8d<br>rgb(78,251,141)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#b8fec9">
<div class="color-box-sample"></div>
<p><b>success-950</b></p>
<p>#b8fec9<br>rgb(184,254,201)<br>hsl(135deg 96.5% 85.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#46fd89"></div>
<p><b>hover</b><br>#46fd89<br>rgb(70,253,137)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#34eb7b"></div>
<p><b>active</b><br>#34eb7b<br>rgb(52,235,123)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#88fdaa">
<div class="color-box-sample"></div>
<p><b>success-925</b></p>
<p>#88fdaa<br>rgb(136,253,170)<br>hsl(137.4deg 97.1% 76.3%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3ee87e"></div>
<p><b>hover</b><br>#3ee87e<br>rgb(62,232,126)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#36d070"></div>
<p><b>active</b><br>#36d070<br>rgb(54,208,112)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#3bea7e">
<div class="color-box-sample"></div>
<p><b>success-850</b></p>
<p>#3bea7e<br>rgb(59,234,126)<br>hsl(143deg 80.9% 57.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#2cb862"></div>
<p><b>hover</b><br>#2cb862<br>rgb(44,184,98)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#259e53"></div>
<p><b>active</b><br>#259e53<br>rgb(37,158,83)</p>
</div>
</div>
</div>
</div>
<h3>Succès (thème sombre)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#1f8d49">
<div class="color-box-sample"></div>
<p><b>success-main-525</b></p>
<p>#1f8d49<br>rgb(31,141,73)<br>hsl(143deg 63.5% 33.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#2ec166"></div>
<p><b>hover</b><br>#2ec166<br>rgb(46,193,102)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#36db75"></div>
<p><b>active</b><br>#36db75<br>rgb(54,219,117)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#27a658">
<div class="color-box-sample"></div>
<p><b>success-625</b></p>
<p>#27a658<br>rgb(39,166,88)<br>hsl(143deg 62.1% 40.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#36d975"></div>
<p><b>hover</b><br>#36d975<br>rgb(54,217,117)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#3df183"></div>
<p><b>active</b><br>#3df183<br>rgb(61,241,131)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#204129">
<div class="color-box-sample"></div>
<p><b>success-200</b></p>
<p>#204129<br>rgb(32,65,41)<br>hsl(137deg 33.2% 19%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3a6d48"></div>
<p><b>hover</b><br>#3a6d48<br>rgb(58,109,72)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#478558"></div>
<p><b>active</b><br>#478558<br>rgb(71,133,88)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#1e2e22">
<div class="color-box-sample"></div>
<p><b>success-125</b></p>
<p>#1e2e22<br>rgb(30,46,34)<br>hsl(135.1deg 21.4% 14.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#3b5541"></div>
<p><b>hover</b><br>#3b5541<br>rgb(59,85,65)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#4b6b53"></div>
<p><b>active</b><br>#4b6b53<br>rgb(75,107,83)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#19271d">
<div class="color-box-sample"></div>
<p><b>success-100</b></p>
<p>#19271d<br>rgb(25,39,29)<br>hsl(135.1deg 22.4% 12.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#344c3b"></div>
<p><b>hover</b><br>#344c3b<br>rgb(52,76,59)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#44624d"></div>
<p><b>active</b><br>#44624d<br>rgb(68,98,77)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#142117">
<div class="color-box-sample"></div>
<p><b>success-75</b></p>
<p>#142117<br>rgb(20,33,23)<br>hsl(135.1deg 23.9% 10.3%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#2e4533"></div>
<p><b>hover</b><br>#2e4533<br>rgb(46,69,51)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#3d5943"></div>
<p><b>active</b><br>#3d5943<br>rgb(61,89,67)</p>
</div>
</div>
</div>
</div>
<h3>Avertissement (thème clair)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#d64d00">
<div class="color-box-sample"></div>
<p><b>warning-main-525</b></p>
<p>#d64d00<br>rgb(214,77,0)<br>hsl(21.7deg 100% 42%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ff754e"></div>
<p><b>hover</b><br>#ff754e<br>rgb(255,117,78)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ff8e76"></div>
<p><b>active</b><br>#ff8e76<br>rgb(255,142,118)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#b34000">
<div class="color-box-sample"></div>
<p><b>warning-425</b></p>
<p>#b34000<br>rgb(179,64,0)<br>hsl(21.3deg 100% 35.1%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ff6218"></div>
<p><b>hover</b><br>#ff6218<br>rgb(255,98,24)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ff7a55"></div>
<p><b>active</b><br>#ff7a55<br>rgb(255,122,85)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#fff4f3">
<div class="color-box-sample"></div>
<p><b>warning-975</b></p>
<p>#fff4f3<br>rgb(255,244,243)<br>hsl(6.9deg 100% 97.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ffd7d3"></div>
<p><b>hover</b><br>#ffd7d3<br>rgb(255,215,211)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ffc4bd"></div>
<p><b>active</b><br>#ffc4bd<br>rgb(255,196,189)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#ffe9e6">
<div class="color-box-sample"></div>
<p><b>warning-950</b></p>
<p>#ffe9e6<br>rgb(255,233,230)<br>hsl(7.1deg 100% 95.1%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ffc6bd"></div>
<p><b>hover</b><br>#ffc6bd<br>rgb(255,198,189)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ffb0a2"></div>
<p><b>active</b><br>#ffb0a2<br>rgb(255,176,162)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#ffded9">
<div class="color-box-sample"></div>
<p><b>warning-925</b></p>
<p>#ffded9<br>rgb(255,222,217)<br>hsl(7.4deg 100% 92.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ffb6a9"></div>
<p><b>hover</b><br>#ffb6a9<br>rgb(255,182,169)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ff9f8b"></div>
<p><b>active</b><br>#ff9f8b<br>rgb(255,159,139)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#ffbeb4">
<div class="color-box-sample"></div>
<p><b>warning-850</b></p>
<p>#ffbeb4<br>rgb(255,190,180)<br>hsl(8.3deg 100% 85.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ff8e77"></div>
<p><b>hover</b><br>#ff8e77<br>rgb(255,142,119)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ff7550"></div>
<p><b>active</b><br>#ff7550<br>rgb(255,117,80)</p>
</div>
</div>
</div>
</div>
<h3>Avertissement (thème sombre)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#d64d00">
<div class="color-box-sample"></div>
<p><b>warning-main-525</b></p>
<p>#d64d00<br>rgb(214,77,0)<br>hsl(21.7deg 100% 42%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ff754e"></div>
<p><b>hover</b><br>#ff754e<br>rgb(255,117,78)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ff8e76"></div>
<p><b>active</b><br>#ff8e76<br>rgb(255,142,118)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#fc5d00">
<div class="color-box-sample"></div>
<p><b>warning-625</b></p>
<p>#fc5d00<br>rgb(252,93,0)<br>hsl(22.1deg 100% 49.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ff8c73"></div>
<p><b>hover</b><br>#ff8c73<br>rgb(255,140,115)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ffa595"></div>
<p><b>active</b><br>#ffa595<br>rgb(255,165,149)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#5d2c20">
<div class="color-box-sample"></div>
<p><b>warning-200</b></p>
<p>#5d2c20<br>rgb(93,44,32)<br>hsl(11.6deg 48.2% 24.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#9a4d3a"></div>
<p><b>hover</b><br>#9a4d3a<br>rgb(154,77,58)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#bc5f49"></div>
<p><b>active</b><br>#bc5f49<br>rgb(188,95,73)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#3e231e">
<div class="color-box-sample"></div>
<p><b>warning-125</b></p>
<p>#3e231e<br>rgb(62,35,30)<br>hsl(9.7deg 35.5% 18%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#70433b"></div>
<p><b>hover</b><br>#70433b<br>rgb(112,67,59)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#8d564c"></div>
<p><b>active</b><br>#8d564c<br>rgb(141,86,76)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#361e19">
<div class="color-box-sample"></div>
<p><b>warning-100</b></p>
<p>#361e19<br>rgb(54,30,25)<br>hsl(9.7deg 36.8% 15.5%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#663d35"></div>
<p><b>hover</b><br>#663d35<br>rgb(102,61,53)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#824f44"></div>
<p><b>active</b><br>#824f44<br>rgb(130,79,68)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#2d1814">
<div class="color-box-sample"></div>
<p><b>warning-75</b></p>
<p>#2d1814<br>rgb(45,24,20)<br>hsl(9.7deg 38.8% 12.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#5b352e"></div>
<p><b>hover</b><br>#5b352e<br>rgb(91,53,46)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#75473e"></div>
<p><b>active</b><br>#75473e<br>rgb(117,71,62)</p>
</div>
</div>
</div>
</div>
<h3>Erreur (thème clair)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#f60700">
<div class="color-box-sample"></div>
<p><b>error-main-525</b></p>
<p>#f60700<br>rgb(246,7,0)<br>hsl(1.8deg 100% 48.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ff3634"></div>
<p><b>hover</b><br>#ff3634<br>rgb(255,54,52)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ff5150"></div>
<p><b>active</b><br>#ff5150<br>rgb(255,81,80)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#ce0500">
<div class="color-box-sample"></div>
<p><b>error-425</b></p>
<p>#ce0500<br>rgb(206,5,0)<br>hsl(1.4deg 100% 40.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ff2725"></div>
<p><b>hover</b><br>#ff2725<br>rgb(255,39,37)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ff4140"></div>
<p><b>active</b><br>#ff4140<br>rgb(255,65,64)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#fff4f4">
<div class="color-box-sample"></div>
<p><b>error-975</b></p>
<p>#fff4f4<br>rgb(255,244,244)<br>hsl(0.1deg 100% 97.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ffd7d7"></div>
<p><b>hover</b><br>#ffd7d7<br>rgb(255,215,215)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ffc3c3"></div>
<p><b>active</b><br>#ffc3c3<br>rgb(255,195,195)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#ffe9e9">
<div class="color-box-sample"></div>
<p><b>error-950</b></p>
<p>#ffe9e9<br>rgb(255,233,233)<br>hsl(0.2deg 100% 95.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ffc5c5"></div>
<p><b>hover</b><br>#ffc5c5<br>rgb(255,197,197)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ffafaf"></div>
<p><b>active</b><br>#ffafaf<br>rgb(255,175,175)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#ffdddd">
<div class="color-box-sample"></div>
<p><b>error-925</b></p>
<p>#ffdddd<br>rgb(255,221,221)<br>hsl(0.2deg 100% 93.4%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ffb4b4"></div>
<p><b>hover</b><br>#ffb4b4<br>rgb(255,180,180)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ff9c9c"></div>
<p><b>active</b><br>#ff9c9c<br>rgb(255,156,156)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#ffbdbd">
<div class="color-box-sample"></div>
<p><b>error-850</b></p>
<p>#ffbdbd<br>rgb(255,189,189)<br>hsl(0.2deg 100% 87.1%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ff8c8c"></div>
<p><b>hover</b><br>#ff8c8c<br>rgb(255,140,140)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ff7272"></div>
<p><b>active</b><br>#ff7272<br>rgb(255,114,114)</p>
</div>
</div>
</div>
</div>
<h3>Erreur (thème sombre)</h3>
<div class="array-sample">
<div class="box-sample" style="--color-box:#f60700">
<div class="color-box-sample"></div>
<p><b>error-main-525</b></p>
<p>#f60700<br>rgb(246,7,0)<br>hsl(1.8deg 100% 48.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ff3634"></div>
<p><b>hover</b><br>#ff3634<br>rgb(255,54,52)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ff5150"></div>
<p><b>active</b><br>#ff5150<br>rgb(255,81,80)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#ff5655">
<div class="color-box-sample"></div>
<p><b>error-625</b></p>
<p>#ff5655<br>rgb(255,86,85)<br>hsl(0.4deg 100% 66.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#ff8c8c"></div>
<p><b>hover</b><br>#ff8c8c<br>rgb(255,140,140)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#ffa6a6"></div>
<p><b>active</b><br>#ffa6a6<br>rgb(255,166,166)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#642626">
<div class="color-box-sample"></div>
<p><b>error-200</b></p>
<p>#642626<br>rgb(100,38,38)<br>hsl(0.3deg 45.2% 26.9%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#a74545"></div>
<p><b>hover</b><br>#a74545<br>rgb(167,69,69)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#cb5555"></div>
<p><b>active</b><br>#cb5555<br>rgb(203,85,85)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#412121">
<div class="color-box-sample"></div>
<p><b>error-125</b></p>
<p>#412121<br>rgb(65,33,33)<br>hsl(0.2deg 32.5% 19.2%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#764040"></div>
<p><b>hover</b><br>#764040<br>rgb(118,64,64)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#935252"></div>
<p><b>active</b><br>#935252<br>rgb(147,82,82)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#391c1c">
<div class="color-box-sample"></div>
<p><b>error-100</b></p>
<p>#391c1c<br>rgb(57,28,28)<br>hsl(0.2deg 33.6% 16.6%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#6c3a3a"></div>
<p><b>hover</b><br>#6c3a3a<br>rgb(108,58,58)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#894b4b"></div>
<p><b>active</b><br>#894b4b<br>rgb(137,75,75)</p>
</div>
</div>
</div>
<div class="box-sample" style="--color-box:#301717">
<div class="color-box-sample"></div>
<p><b>error-75</b></p>
<p>#301717<br>rgb(48,23,23)<br>hsl(0.2deg 35.4% 13.8%)<br><br></p>
<div class="box-children-sample">
<div>
<div class="color-box-sample--sm" style="--color-box:#603434"></div>
<p><b>hover</b><br>#603434<br>rgb(96,52,52)</p>
</div>
<div>
<div class="color-box-sample--sm" style="--color-box:#7c4444"></div>
<p><b>active</b><br>#7c4444<br>rgb(124,68,68)</p>
</div>
</div>
</div>
</div>
</body></html>