Couleur nommée la plus proche · #C7363C
#C7363C
Couleur nommée la plus proche: Bento Box
#C7363C (rgb(199 54 60), hsl(358 57% 50%), oklch(0.555 0.181 23.3)) est la plus proche de la couleur nommée Bento Box. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#C7363C
oklch(0.555 0.181 23.3)
Conversions de couleur
- HEX
- #c7363c
- RGB
- rgb(199 54 60)
- HSL
- hsl(358 57% 50%)
- HWB
- hwb(358 21% 22%)
- OKLCH
- oklch(0.555 0.181 23.3)
- OKLab
- oklab(0.555 0.167 0.072)
- CIE Lab
- lab(46.48 57.69 32.56)
- LCH
- lch(46.48 66.24 29.4)
- CMYK
- cmyk(0% 73% 70% 22%)
Teintes · Ombres · Tons
Teintes
- CF4F4F
- D76562
- DF7975
- E58C88
- EBA09B
- F0B3AE
- F5C6C2
- F9D9D6
- FCECEA
Ombres
- AD2E33
- 93252A
- 7A1E21
- 621619
- 4C0F11
- 36080A
- 210304
- 0E0101
- 020000
Tons
- C14244
- BC4C4B
- B65452
- AF5C59
- A96360
- A26A66
- 9A706D
- 927573
- 897B7A
Harmonies de couleurs
Complémentaire +180°
- C7363C
Bento Box
- 00838C
≈ Precious Blue
Analogue -30° +30°
- C7363C
Bento Box
- BD377B
≈ Pink Shadow
- B05700
≈ Elm Brown Red
Triadique +120° +240°
- C7363C
Bento Box
- 068C15
≈ Diamine Green
- 376BDB
≈ Royal Blue
Complémentaire divisée +150° +210°
- C7363C
Bento Box
- 00876D
≈ Celtic Queen
- 007DAB
≈ Neptune
Tétradique +90° +180° +270°
- C7363C
Bento Box
- 747A00
≈ Flag Green
- 00838C
≈ Precious Blue
- 7B56D1
≈ Astro Purple
Contraste et accessibilité
Ag
AASur blanc
WCAG 5.22:1 · APCA Lc 75
Ag
FailSur noir
WCAG 4.02:1 · APCA Lc 27
Meilleure couleur de texte: #FFFFFF
WCAG 5.22:1 (AA) · APCA Lc 75
Contrast pairs
Extraits de code
CSS
:root {
--bento-box: #c7363c;
--bento-box-rgb: 199 54 60;
--bento-box-oklch: oklch(0.555 0.181 23.3);
}
.element {
color: var(--bento-box);
background-color: hsl(358 57% 50%);
border-color: oklch(0.555 0.181 23.3);
}Tailwind CSS v4
@theme {
--color-bento-box: #c7363c;
--color-bento-box-50: #ffe2db;
--color-bento-box-100: #ffd1c9;
--color-bento-box-200: #ffb5ac;
--color-bento-box-300: #ff9087;
--color-bento-box-400: #f76b69;
--color-bento-box-500: #e64248;
--color-bento-box-600: #c23a3e;
--color-bento-box-700: #9c2e31;
--color-bento-box-800: #742025;
--color-bento-box-900: #521519;
--color-bento-box-950: #370509;
}SCSS
$bento-box: #c7363c;
$bento-box-rgb: 199, 54, 60;
$bento-box-light: mix(#fff, $bento-box, 20%);
$bento-box-dark: mix(#000, $bento-box, 20%);
.element {
color: $bento-box;
box-shadow: 0 0 0 2px rgba($bento-box, 0.35);
}