Nazwany kolor · #FFAF37
Ripe Pumpkin
Ripe Pumpkin to #FFAF37: rgb(255 175 55), hsl(36 100% 61%), oklch(0.812 0.157 72.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Ripe Pumpkin color name →
#FFAF37
oklch(0.812 0.157 72.2)
Konwersje koloru
- HEX
- #ffaf37
- RGB
- rgb(255 175 55)
- HSL
- hsl(36 100% 61%)
- HWB
- hwb(36 22% 0%)
- OKLCH
- oklch(0.812 0.157 72.2)
- OKLab
- oklab(0.812 0.048 0.149)
- CIE Lab
- lab(78 23.25 69.12)
- LCH
- lch(78 72.93 71.4)
- CMYK
- cmyk(0% 31% 78% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FFB854
- FFC06C
- FFC881
- FFD094
- FFD8A7
- FFE0B9
- FFE8CB
- FFF0DC
- FFF7EE
Odcienie ciemniejsze
- DE982E
- BE8126
- 9E6B1E
- 805616
- 63410F
- 482E08
- 2E1C03
- 160B01
- 030100
Tony
- F2AB46
- E5A651
- D8A25B
- CC9D62
- BF9969
- B2946F
- A68F74
- 998A78
- 8D857C
Harmonie kolorów
Komplementarna +180°
- FFAF37
Ripe Pumpkin
- 94C6FF
≈ Clear Sky
Analogowa -30° +30°
- FFAF37
Ripe Pumpkin
- FFA988
≈ Super Sepia
- D6C431
≈ Gone Giddy
Triada +120° +240°
- FFAF37
Ripe Pumpkin
- 00DDD9
≈ Fish Boy
- DEA8FF
≈ Testosterose
Komplementarna rozszczepiona +150° +210°
- FFAF37
Ripe Pumpkin
- 44D4FF
≈ Libra Blue Morpho
- B7BAFF
≈ Greyish Lavender
Tetrada +90° +180° +270°
- FFAF37
Ripe Pumpkin
- 46E0A3
≈ Malted Mint Madness
- 94C6FF
≈ Clear Sky
- FF9CDB
≈ Rose Daphne
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.83:1 · APCA Lc 34
Ag
AAANa czerni
WCAG 11.43:1 · APCA Lc 68
Najlepszy kolor tekstu: #000000
WCAG 11.43:1 (AAA) · APCA Lc 68
Contrast pairs
Fragmenty kodu
CSS
:root {
--ripe-pumpkin: #ffaf37;
--ripe-pumpkin-rgb: 255 175 55;
--ripe-pumpkin-oklch: oklch(0.812 0.157 72.2);
}
.element {
color: var(--ripe-pumpkin);
background-color: hsl(36 100% 61%);
border-color: oklch(0.812 0.157 72.2);
}Tailwind CSS v4
@theme {
--color-ripe-pumpkin: #ffaf37;
--color-ripe-pumpkin-50: #ffefc4;
--color-ripe-pumpkin-100: #ffe1ae;
--color-ripe-pumpkin-200: #fccb87;
--color-ripe-pumpkin-300: #e7ab53;
--color-ripe-pumpkin-400: #d68d05;
--color-ripe-pumpkin-500: #c36f00;
--color-ripe-pumpkin-600: #a55f00;
--color-ripe-pumpkin-700: #844c00;
--color-ripe-pumpkin-800: #633600;
--color-ripe-pumpkin-900: #462500;
--color-ripe-pumpkin-950: #2d1300;
}SCSS
$ripe-pumpkin: #ffaf37;
$ripe-pumpkin-rgb: 255, 175, 55;
$ripe-pumpkin-light: mix(#fff, $ripe-pumpkin, 20%);
$ripe-pumpkin-dark: mix(#000, $ripe-pumpkin, 20%);
.element {
color: $ripe-pumpkin;
box-shadow: 0 0 0 2px rgba($ripe-pumpkin, 0.35);
}