Nazwany kolor · #FF5630
Poppy Surprise
Poppy Surprise to #FF5630: rgb(255 86 48), hsl(11 100% 59%), oklch(0.679 0.211 34). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Poppy Surprise color name →
#FF5630
oklch(0.679 0.211 34)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FF6B4A
- FF7E60
- FF9075
- FFA189
- FFB19D
- FFC1B0
- FFD1C4
- FFE0D8
- FFF0EB
Odcienie ciemniejsze
- DE4A28
- BE3E21
- 9E321A
- 802713
- 631C0C
- 481206
- 2E0803
- 160201
- 030000
Tony
- F35E3D
- E86547
- DC6A51
- D06F59
- C37360
- B77767
- AA7A6E
- 9D7C74
- 8F7E7A
Harmonie kolorów
Komplementarna +180°
- FF5630
Poppy Surprise
- 00AAC5
≈ Sarah’s Garden
Analogowa -30° +30°
- FF5630
Poppy Surprise
- FA4E89
≈ French Rose
- D88000
≈ Orange Pepper
Triada +120° +240°
- FF5630
Poppy Surprise
- 00B565
≈ Future Hair
- 798CFF
≈ Punch Out Glove
Komplementarna rozszczepiona +150° +210°
- FF5630
Poppy Surprise
- 00B0A0
≈ Billiard
- 00A0F6
≈ Button Blue
Tetrada +90° +180° +270°
- FF5630
Poppy Surprise
- 83A800
≈ Hillsbrad Grass
- 00AAC5
≈ Sarah’s Garden
- B56EFF
≈ Queer Purple
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.16:1 · APCA Lc 58
Ag
AANa czerni
WCAG 6.62:1 · APCA Lc 44
Najlepszy kolor tekstu: #000000
WCAG 6.62:1 (AA) · APCA Lc 44
Contrast pairs
Fragmenty kodu
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);
}