Nazwany kolor · #FF7538
Synthetic Pumpkin
Synthetic Pumpkin to #FF7538: rgb(255 117 56), hsl(18 100% 61%), oklch(0.718 0.184 42.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Synthetic Pumpkin color name →
#FF7538
oklch(0.718 0.184 42.3)
Konwersje koloru
- HEX
- #ff7538
- RGB
- rgb(255 117 56)
- HSL
- hsl(18 100% 61%)
- HWB
- hwb(18 22% 0%)
- OKLCH
- oklch(0.718 0.184 42.3)
- OKLab
- oklab(0.718 0.136 0.124)
- CIE Lab
- lab(65.94 51.24 58.05)
- LCH
- lch(65.94 77.43 48.6)
- CMYK
- cmyk(0% 54% 78% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FF8551
- FF9367
- FFA27B
- FFB08E
- FFBDA1
- FFCBB4
- FFD8C7
- FFE5D9
- FFF2EC
Odcienie ciemniejsze
- DE652F
- BE5527
- 9E461F
- 803717
- 63290F
- 481C08
- 2E0F04
- 160501
- 030100
Tony
- F37844
- E77A4E
- DA7C56
- CE7E5E
- C27F65
- B5806B
- A88071
- 9B8076
- 8E807B
Harmonie kolorów
Komplementarna +180°
- FF7538
Synthetic Pumpkin
- 00B5E0
≈ Blue Atoll
Analogowa -30° +30°
- FF7538
Synthetic Pumpkin
- FF6C85
≈ Ultra Red
- DE9200
≈ Beige Red
Triada +120° +240°
- FF7538
Synthetic Pumpkin
- 00C286
≈ Píng Gǔo Lǜ Green
- 9796FF
≈ Cobalite
Komplementarna rozszczepiona +150° +210°
- FF7538
Synthetic Pumpkin
- 00BCB8
≈ Jade Gravel
- 57A8FF
≈ Âbi Blue
Tetrada +90° +180° +270°
- FF7538
Synthetic Pumpkin
- 76BB2A
≈ Jubilant Meadow
- 00B5E0
≈ Blue Atoll
- CA7DF5
≈ Azuremyst Isle
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.67:1 · APCA Lc 51
Ag
AAANa czerni
WCAG 7.85:1 · APCA Lc 51
Najlepszy kolor tekstu: #000000
WCAG 7.85:1 (AAA) · APCA Lc 51
Contrast pairs
Fragmenty kodu
CSS
:root {
--synthetic-pumpkin: #ff7538;
--synthetic-pumpkin-rgb: 255 117 56;
--synthetic-pumpkin-oklch: oklch(0.718 0.184 42.3);
}
.element {
color: var(--synthetic-pumpkin);
background-color: hsl(18 100% 61%);
border-color: oklch(0.718 0.184 42.3);
}Tailwind CSS v4
@theme {
--color-synthetic-pumpkin: #ff7538;
--color-synthetic-pumpkin-50: #ffe5cb;
--color-synthetic-pumpkin-100: #ffd5b6;
--color-synthetic-pumpkin-200: #ffbb93;
--color-synthetic-pumpkin-300: #ff9665;
--color-synthetic-pumpkin-400: #f5733a;
--color-synthetic-pumpkin-500: #e34c00;
--color-synthetic-pumpkin-600: #c04200;
--color-synthetic-pumpkin-700: #9a3500;
--color-synthetic-pumpkin-800: #742400;
--color-synthetic-pumpkin-900: #521801;
--color-synthetic-pumpkin-950: #360800;
}SCSS
$synthetic-pumpkin: #ff7538;
$synthetic-pumpkin-rgb: 255, 117, 56;
$synthetic-pumpkin-light: mix(#fff, $synthetic-pumpkin, 20%);
$synthetic-pumpkin-dark: mix(#000, $synthetic-pumpkin, 20%);
.element {
color: $synthetic-pumpkin;
box-shadow: 0 0 0 2px rgba($synthetic-pumpkin, 0.35);
}