Najbliższy nazwany kolor · #C7363C
#C7363C
Najbliższy nazwany kolor: Bento Box
#C7363C (rgb(199 54 60), hsl(358 57% 50%), oklch(0.555 0.181 23.3)) jest najbliższy nazwanemu kolorowi Bento Box. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#C7363C
oklch(0.555 0.181 23.3)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- CF4F4F
- D76562
- DF7975
- E58C88
- EBA09B
- F0B3AE
- F5C6C2
- F9D9D6
- FCECEA
Odcienie ciemniejsze
- AD2E33
- 93252A
- 7A1E21
- 621619
- 4C0F11
- 36080A
- 210304
- 0E0101
- 020000
Tony
- C14244
- BC4C4B
- B65452
- AF5C59
- A96360
- A26A66
- 9A706D
- 927573
- 897B7A
Harmonie kolorów
Komplementarna +180°
- C7363C
Bento Box
- 00838C
≈ Precious Blue
Analogowa -30° +30°
- C7363C
Bento Box
- BD377B
≈ Pink Shadow
- B05700
≈ Elm Brown Red
Triada +120° +240°
- C7363C
Bento Box
- 068C15
≈ Diamine Green
- 376BDB
≈ Royal Blue
Komplementarna rozszczepiona +150° +210°
- C7363C
Bento Box
- 00876D
≈ Celtic Queen
- 007DAB
≈ Neptune
Tetrada +90° +180° +270°
- C7363C
Bento Box
- 747A00
≈ Flag Green
- 00838C
≈ Precious Blue
- 7B56D1
≈ Astro Purple
Kontrast i dostępność
Ag
AANa bieli
WCAG 5.22:1 · APCA Lc 75
Ag
FailNa czerni
WCAG 4.02:1 · APCA Lc 27
Najlepszy kolor tekstu: #FFFFFF
WCAG 5.22:1 (AA) · APCA Lc 75
Contrast pairs
Fragmenty kodu
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);
}