Colore con nome · #FF5630
Poppy Surprise
Poppy Surprise è #FF5630: rgb(255 86 48), hsl(11 100% 59%), oklch(0.679 0.211 34). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Red mean? → · Poppy Surprise color name →
#FF5630
oklch(0.679 0.211 34)
Conversioni di colore
- HEX
- #ff5630
- RGB
- rgb(255 86 48)
- HSL
- hsl(11 100% 59%)
- HWB
- hwb(11 19% 0%)
- OKLCH
- oklch(0.679 0.211 34)
- OKLab
- oklab(0.679 0.175 0.118)
- CIE Lab
- lab(60.87 63.86 57.22)
- LCH
- lch(60.87 85.74 41.9)
- CMYK
- cmyk(0% 66% 81% 0%)
Tinte · Ombre · Toni
Tinte
- FF6B4A
- FF7E60
- FF9075
- FFA189
- FFB19D
- FFC1B0
- FFD1C4
- FFE0D8
- FFF0EB
Ombre
- DE4A28
- BE3E21
- 9E321A
- 802713
- 631C0C
- 481206
- 2E0803
- 160201
- 030000
Toni
- F35E3D
- E86547
- DC6A51
- D06F59
- C37360
- B77767
- AA7A6E
- 9D7C74
- 8F7E7A
Armonie di colore
Complementare +180°
- FF5630
Poppy Surprise
- 00AAC5
≈ Sarah’s Garden
Analogo -30° +30°
- FF5630
Poppy Surprise
- FA4E89
≈ French Rose
- D88000
≈ Orange Pepper
Triadico +120° +240°
- FF5630
Poppy Surprise
- 00B565
≈ Future Hair
- 798CFF
≈ Punch Out Glove
Complementare divisa +150° +210°
- FF5630
Poppy Surprise
- 00B0A0
≈ Billiard
- 00A0F6
≈ Button Blue
Tetradico +90° +180° +270°
- FF5630
Poppy Surprise
- 83A800
≈ Hillsbrad Grass
- 00AAC5
≈ Sarah’s Garden
- B56EFF
≈ Queer Purple
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 3.16:1 · APCA Lc 58
Ag
AASu nero
WCAG 6.62:1 · APCA Lc 44
Miglior colore del testo: #000000
WCAG 6.62:1 (AA) · APCA Lc 44
Contrast pairs
Frammenti di codice
CSS
:root {
--poppy-surprise: #ff5630;
--poppy-surprise-rgb: 255 86 48;
--poppy-surprise-oklch: oklch(0.679 0.211 34);
}
.element {
color: var(--poppy-surprise);
background-color: hsl(11 100% 59%);
border-color: oklch(0.679 0.211 34);
}Tailwind CSS v4
@theme {
--color-poppy-surprise: #ff5630;
--color-poppy-surprise-50: #ffe0cc;
--color-poppy-surprise-100: #ffcfb7;
--color-poppy-surprise-200: #ffb294;
--color-poppy-surprise-300: #ff8b67;
--color-poppy-surprise-400: #ff633f;
--color-poppy-surprise-500: #f23000;
--color-poppy-surprise-600: #cc2c00;
--color-poppy-surprise-700: #a42300;
--color-poppy-surprise-800: #7b1706;
--color-poppy-surprise-900: #570f04;
--color-poppy-surprise-950: #3a0100;
}SCSS
$poppy-surprise: #ff5630;
$poppy-surprise-rgb: 255, 86, 48;
$poppy-surprise-light: mix(#fff, $poppy-surprise, 20%);
$poppy-surprise-dark: mix(#000, $poppy-surprise, 20%);
.element {
color: $poppy-surprise;
box-shadow: 0 0 0 2px rgba($poppy-surprise, 0.35);
}