Named color · #FFB355
Cantaloupe Smile
Cantaloupe Smile is #FFB355: rgb(255 179 85), hsl(33 100% 67%), oklch(0.822 0.14 69.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Cantaloupe Smile color name →
#FFB355
oklch(0.822 0.14 69.3)
Color conversions
- HEX
- #ffb355
- RGB
- rgb(255 179 85)
- HSL
- hsl(33 100% 67%)
- HWB
- hwb(33 33% 0%)
- OKLCH
- oklch(0.822 0.14 69.3)
- OKLab
- oklab(0.822 0.05 0.131)
- CIE Lab
- lab(79.11 22.22 58.06)
- LCH
- lch(79.11 62.17 69.1)
- CMYK
- cmyk(0% 30% 67% 0%)
Tints · Shades · Tones
Tints
- FFBB6A
- FFC37D
- FFCB8E
- FFD29F
- FFDAB0
- FFE2C0
- FFE9D0
- FFF0E0
- FFF8EF
Shades
- DE9B49
- BE843D
- 9E6E31
- 805826
- 63431C
- 482F11
- 2E1D08
- 160C02
- 030100
Tones
- F2AE5D
- E5A963
- D8A469
- CB9F6E
- BF9A72
- B29576
- A69079
- 998B7C
- 8D857E
Color harmonies
Complementary +180°
- FFB355
Cantaloupe Smile
- 96CAFF
≈ Apocyan
Analogous -30° +30°
- FFB355
Cantaloupe Smile
- FFAE93
≈ Peach Nectar
- DBC64D
≈ Yellow Magic Orchestra
Triadic +120° +240°
- FFB355
Cantaloupe Smile
- 16E1D8
≈ Fresh Turquoise
- DCAFFF
≈ Mauve
Split-complementary +150° +210°
- FFB355
Cantaloupe Smile
- 43D8FF
≈ Libra Blue Morpho
- B8BFFF
≈ Dried Lilac
Tetradic +90° +180° +270°
- FFB355
Cantaloupe Smile
- 67E0A4
≈ Medium Aquamarine
- 96CAFF
≈ Apocyan
- FFA1E2
≈ Lavender Rose
Contrast & accessibility
Ag
FailOn white
WCAG 1.77:1 · APCA Lc 32
Ag
AAAOn black
WCAG 11.83:1 · APCA Lc 70
Best text color: #000000
WCAG 11.83:1 (AAA) · APCA Lc 70
Contrast pairs
Code snippets
CSS
:root {
--cantaloupe-smile: #ffb355;
--cantaloupe-smile-rgb: 255 179 85;
--cantaloupe-smile-oklch: oklch(0.822 0.14 69.3);
}
.element {
color: var(--cantaloupe-smile);
background-color: hsl(33 100% 67%);
border-color: oklch(0.822 0.14 69.3);
}Tailwind CSS v4
@theme {
--color-cantaloupe-smile: #ffb355;
--color-cantaloupe-smile-50: #ffefca;
--color-cantaloupe-smile-100: #ffe1b5;
--color-cantaloupe-smile-200: #facb91;
--color-cantaloupe-smile-300: #e4ab63;
--color-cantaloupe-smile-400: #d38e32;
--color-cantaloupe-smile-500: #c07100;
--color-cantaloupe-smile-600: #a26000;
--color-cantaloupe-smile-700: #824d00;
--color-cantaloupe-smile-800: #623700;
--color-cantaloupe-smile-900: #442500;
--color-cantaloupe-smile-950: #2c1400;
}SCSS
$cantaloupe-smile: #ffb355;
$cantaloupe-smile-rgb: 255, 179, 85;
$cantaloupe-smile-light: mix(#fff, $cantaloupe-smile, 20%);
$cantaloupe-smile-dark: mix(#000, $cantaloupe-smile, 20%);
.element {
color: $cantaloupe-smile;
box-shadow: 0 0 0 2px rgba($cantaloupe-smile, 0.35);
}