Named color · #FF6611
Orange Piñata
Orange Piñata is #FF6611: rgb(255 102 17), hsl(21 100% 53%), oklch(0.696 0.203 42.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Red mean? → · Orange Piñata color name →
#FF6611
oklch(0.696 0.203 42.5)
Color conversions
- HEX
- #ff6611
- RGB
- rgb(255 102 17)
- HSL
- hsl(21 100% 53%)
- HWB
- hwb(21 7% 0%)
- OKLCH
- oklch(0.696 0.203 42.5)
- OKLab
- oklab(0.696 0.15 0.137)
- CIE Lab
- lab(63.18 57.15 69.66)
- LCH
- lch(63.18 90.11 50.6)
- CMYK
- cmyk(0% 60% 93% 0%)
Tints · Shades · Tones
Tints
- FF783B
- FF8956
- FF996D
- FFA983
- FFB798
- FFC6AD
- FFD5C1
- FFE3D6
- FFF1EA
Shades
- DE580D
- BE4A09
- 9E3C06
- 802F04
- 632302
- 481701
- 2E0C00
- 160400
- 030000
Tones
- F36B2C
- E7703C
- DB7348
- CF7753
- C3795C
- B67B64
- A97D6C
- 9C7E73
- 8E7F7A
Color harmonies
Complementary +180°
- FF6611
Orange Piñata
- 00AED7
≈ Bright Cerulean
Analogous -30° +30°
- FF6611
Orange Piñata
- FF5B7B
≈ Watermelon Candy
- D48C00
≈ End of Summer
Triadic +120° +240°
- FF6611
Orange Piñata
- 00B981
≈ Slime Girl
- 908DFF
≈ Lavender Blue Shadow
Split-complementary +150° +210°
- FF6611
Orange Piñata
- 00B4B1
≈ Laguna Green
- 47A0FF
≈ Sky Dancer
Tetradic +90° +180° +270°
- FF6611
Orange Piñata
- 6BB500
≈ Leaf Sheep
- 00AED7
≈ Bright Cerulean
- C770F6
≈ Easter Purple
Contrast & accessibility
Ag
FailOn white
WCAG 2.93:1 · APCA Lc 55
Ag
AAAOn black
WCAG 7.16:1 · APCA Lc 47
Best text color: #000000
WCAG 7.16:1 (AAA) · APCA Lc 47
Contrast pairs
Code snippets
CSS
:root {
--orange-pinata: #ff6611;
--orange-pinata-rgb: 255 102 17;
--orange-pinata-oklch: oklch(0.696 0.203 42.5);
}
.element {
color: var(--orange-pinata);
background-color: hsl(21 100% 53%);
border-color: oklch(0.696 0.203 42.5);
}Tailwind CSS v4
@theme {
--color-orange-pinata: #ff6611;
--color-orange-pinata-50: #ffe3c6;
--color-orange-pinata-100: #ffd3b0;
--color-orange-pinata-200: #ffb78b;
--color-orange-pinata-300: #ff9259;
--color-orange-pinata-400: #fc6c25;
--color-orange-pinata-500: #eb4000;
--color-orange-pinata-600: #c73900;
--color-orange-pinata-700: #a02d00;
--color-orange-pinata-800: #781e00;
--color-orange-pinata-900: #551400;
--color-orange-pinata-950: #390400;
}SCSS
$orange-pinata: #ff6611;
$orange-pinata-rgb: 255, 102, 17;
$orange-pinata-light: mix(#fff, $orange-pinata, 20%);
$orange-pinata-dark: mix(#000, $orange-pinata, 20%);
.element {
color: $orange-pinata;
box-shadow: 0 0 0 2px rgba($orange-pinata, 0.35);
}