Couleur nommée · #BB5F60
Energy Peak
Energy Peak correspond à #BB5F60 : rgb(187 95 96), hsl(359 40% 55%), oklch(0.595 0.119 20.6). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Red mean? → · Energy Peak color name →
#BB5F60
oklch(0.595 0.119 20.6)
Conversions de couleur
- HEX
- #bb5f60
- RGB
- rgb(187 95 96)
- HSL
- hsl(359 40% 55%)
- HWB
- hwb(359 37% 27%)
- OKLCH
- oklch(0.595 0.119 20.6)
- OKLab
- oklab(0.595 0.111 0.042)
- CIE Lab
- lab(51.8 37.86 17.41)
- LCH
- lch(51.8 41.67 24.7)
- CMYK
- cmyk(0% 49% 49% 27%)
Teintes · Ombres · Tons
Teintes
- C36F6F
- CB7F7E
- D38F8D
- DA9F9D
- E1AEAD
- E8BEBD
- EECECD
- F4DEDD
- FAEFEE
Ombres
- A25252
- 8A4445
- 733838
- 5C2C2C
- 462020
- 321515
- 1F0A0A
- 0D0303
- 020000
Tons
- B66363
- B16767
- AB6B6A
- A66E6D
- A07270
- 9A7574
- 947877
- 8E7B7A
- 877D7D
Harmonies de couleurs
Complémentaire +180°
- BB5F60
Energy Peak
- 009097
≈ Splashy
Analogue -30° +30°
- BB5F60
Energy Peak
- B35F88
≈ Dahlia Mauve
- B66837
≈ Mincemeat
Triadique +120° +240°
- BB5F60
Energy Peak
- 55904A
≈ Virgo Green Goddess
- 557EC5
≈ Blue Iolite
Complémentaire divisée +150° +210°
- BB5F60
Energy Peak
- 009575
≈ Pool Table
- 038AB8
≈ Spinnaker Blue
Tétradique +90° +180° +270°
- BB5F60
Energy Peak
- 83851F
≈ Trendy Green
- 009097
≈ Splashy
- 7F71C0
≈ Venus Violet
Contraste et accessibilité
Ag
FailSur blanc
WCAG 4.26:1 · APCA Lc 69
Ag
AASur noir
WCAG 4.91:1 · APCA Lc 33
Meilleure couleur de texte: #000000
WCAG 4.91:1 (AA) · APCA Lc 33
Contrast pairs
Extraits de code
CSS
:root {
--energy-peak: #bb5f60;
--energy-peak-rgb: 187 95 96;
--energy-peak-oklch: oklch(0.595 0.119 20.6);
}
.element {
color: var(--energy-peak);
background-color: hsl(359 40% 55%);
border-color: oklch(0.595 0.119 20.6);
}Tailwind CSS v4
@theme {
--color-energy-peak: #bb5f60;
--color-energy-peak-50: #ffe9e6;
--color-energy-peak-100: #ffd9d6;
--color-energy-peak-200: #ffc1bd;
--color-energy-peak-300: #ee9f9b;
--color-energy-peak-400: #dc8180;
--color-energy-peak-500: #c96264;
--color-energy-peak-600: #a95455;
--color-energy-peak-700: #884344;
--color-energy-peak-800: #653032;
--color-energy-peak-900: #472022;
--color-energy-peak-950: #2e0f11;
}SCSS
$energy-peak: #bb5f60;
$energy-peak-rgb: 187, 95, 96;
$energy-peak-light: mix(#fff, $energy-peak, 20%);
$energy-peak-dark: mix(#000, $energy-peak, 20%);
.element {
color: $energy-peak;
box-shadow: 0 0 0 2px rgba($energy-peak, 0.35);
}