Nazwany kolor · #F7DAC0
Pumpkin Essence
Pumpkin Essence to #F7DAC0: rgb(247 218 192), hsl(28 77% 86%), oklch(0.906 0.047 64.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Pumpkin Essence color name →
#F7DAC0
oklch(0.906 0.047 64.1)
Konwersje koloru
- HEX
- #f7dac0
- RGB
- rgb(247 218 192)
- HSL
- hsl(28 77% 86%)
- HWB
- hwb(28 75% 3%)
- OKLCH
- oklch(0.906 0.047 64.1)
- OKLab
- oklab(0.906 0.021 0.043)
- CIE Lab
- lab(88.99 7.47 16.72)
- LCH
- lch(88.99 18.32 65.9)
- CMYK
- cmyk(0% 12% 22% 3%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F8DEC6
- F9E1CD
- FAE5D3
- FAE9D9
- FBEDDF
- FCF0E6
- FDF4EC
- FEF8F2
- FEFBF9
Odcienie ciemniejsze
- D7BDA7
- B7A28E
- 998776
- 7C6C5F
- 605449
- 453C34
- 2C2520
- 15110E
- 030202
Tony
- EBD1B9
- DEC7B3
- D2BEAD
- C6B5A6
- BAACA0
- AEA399
- A29A93
- 97918D
- 8B8986
Harmonie kolorów
Komplementarna +180°
- F7DAC0
Pumpkin Essence
- C6E4FE
≈ Fresh Water
Analogowa -30° +30°
- F7DAC0
Pumpkin Essence
- FED5CC
≈ Pale Jasper
- EAE0BD
≈ Beurre Blanc
Triada +120° +240°
- F7DAC0
Pumpkin Essence
- BEEBE3
≈ Pool Party
- E6D9FA
≈ Pouty Purple
Komplementarna rozszczepiona +150° +210°
- F7DAC0
Pumpkin Essence
- BDE9F3
≈ First of July
- D6DEFF
≈ Transparent Blue
Tetrada +90° +180° +270°
- F7DAC0
Pumpkin Essence
- C9EAD2
≈ Glacial Water Green
- C6E4FE
≈ Fresh Water
- F4D5ED
≈ Infatuation
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.33:1 · APCA Lc 16
Ag
AAANa czerni
WCAG 15.74:1 · APCA Lc 87
Najlepszy kolor tekstu: #000000
WCAG 15.74:1 (AAA) · APCA Lc 87
Contrast pairs
Fragmenty kodu
CSS
:root {
--pumpkin-essence: #f7dac0;
--pumpkin-essence-rgb: 247 218 192;
--pumpkin-essence-oklch: oklch(0.906 0.047 64.1);
}
.element {
color: var(--pumpkin-essence);
background-color: hsl(28 77% 86%);
border-color: oklch(0.906 0.047 64.1);
}Tailwind CSS v4
@theme {
--color-pumpkin-essence: #f7dac0;
--color-pumpkin-essence-50: #fff3e7;
--color-pumpkin-essence-100: #f3e5d8;
--color-pumpkin-essence-200: #e3d1c0;
--color-pumpkin-essence-300: #c9b39e;
--color-pumpkin-essence-400: #b39982;
--color-pumpkin-essence-500: #9d8065;
--color-pumpkin-essence-600: #856c56;
--color-pumpkin-essence-700: #6a5745;
--color-pumpkin-essence-800: #4f3f32;
--color-pumpkin-essence-900: #372b22;
--color-pumpkin-essence-950: #211911;
}SCSS
$pumpkin-essence: #f7dac0;
$pumpkin-essence-rgb: 247, 218, 192;
$pumpkin-essence-light: mix(#fff, $pumpkin-essence, 20%);
$pumpkin-essence-dark: mix(#000, $pumpkin-essence, 20%);
.element {
color: $pumpkin-essence;
box-shadow: 0 0 0 2px rgba($pumpkin-essence, 0.35);
}