Celadon is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #A8DCAB
- RGB value: 65.9% red, 86.3% green, and 67.1% blue.
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use celadon in your designs:
- Creating a calming atmosphere. Celadon’s serene nature makes it ideal for applications or websites focusing on relaxation, productivity, or creativity. It can foster a sense of peace and focus for users.
- Add hover effects. To indicate interactivity, make clickable buttons subtly shift to a brighter or darker celadon shade when users hover over them.
- Use it for navigation bar backgrounds. Celadon creates a welcoming entry point to the application and helps distinguish navigation from content without overwhelming the user.
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same calming spectrum as celadon, consider:
- Seafoam (#8DDCDC) is a lighter, airier green with a hint of blue, offering a refreshing and invigorating feel.
- Mint green (#ADEBB3) is a pastel green with a cool, refreshing, and playful vibe.
- Green sage (#98A869) is a deeper shade of green with brown undertones, creating a soothing feel.
To complement celadon, consider pairing it with:
- White (#FFFFFF) provides a crisp, clean backdrop that enhances celadon’s soft, tranquil vibe, creating a light and airy aesthetic.
- Gray (#898989) pairs with celadon for a subtle, neutral palette that maintains a calming atmosphere with added sophistication and versatility.
- Navy blue (#000080) adds depth and visual interest for a timeless and elegant contrast.
Other colors worth considering include blush pink for a gentle warmth that complements celadon’s calming coolness and beige for a serene and harmonious aesthetic.
While celadon is a calming and sophisticated color, it may clash with:
- Yellow (#FFFF00) can overpower celadon’s subtle elegance, creating a visually jarring contrast.
- Burnt orange (#BE5103) clashes with celadon’s cool tones of, creating a disharmonious and potentially unsettling feel.
- Neon green (#2CFF05) disrupts celadon’s tranquility, resulting in a visually overwhelming combination.
- Chili red (#CD1C18) can overpower the celadon’s calm, creating a visually harsh contrast.
Celadon symbolizes tranquility and harmony due to its balanced blend of cool hues.
In color psychology, celadon’s calming nature evokes feelings of tranquility and peace. The cool green and blue tones promote relaxation and serenity, making celadon a suitable choice for creating a sense of calm and focus.
In UI design, use celadon to create a calming user experience. It works well as a background color for applications or websites centered on relaxation, meditation, or productivity.
Celadon has been prized as a symbol of immortality and status since the era of celadon ceramics in China’s Song Dynasty. The name “celadon” emerged much later, inspired by Caledonia, the Romans term for Scotland. The color celadon carries a sense of history and timelessness, reminiscent of the Scottish landscape’s natural, rugged beauty.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Sage Wisdom
Wildflowers
Mint Julep
Contrast 1.56
- Large Text
#A8DCAB
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 13.49
- Large Text
#A8DCAB
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #A8DCAB, known as celadon, has RGB values of R:168 G:220, B:171 and CMYK values of C:24, M:0, Y:22, K:14.
| VALUE | CSS | |
|---|---|---|
| HEX | A8DCAB | #A8DCAB |
| RGB DECIMAL | 168, 220, 171 | RGB(168, 220, 171) |
| RGB PERCENTAGE | 65.9, 86.3, 67.1 | RGB(65.9%, 86.3%, 67.1%) |
| CMYK | 24, 0, 22, 14 | |
| HSL | 123.5°, 42.6, 76.1 | HSL(123.5, 42.6%, 76.1%) |
| HSV (OR HSB) | 123.5°, 23.6, 86.3 | |
| WEB SAFE | 9CC99 | #9CC99 |
| CIE-LAB | 83.152, -26.216, 18.744 | |
| XYZ | 49.09, 62.45, 47.993 | |
| xyY | 0.308, 0.391, 62.45 | |
| CIE-LCH | 83.152, 32.227, 144.435 | |
| CIE-LUV | 83.152, -25.988, 31.491 | |
| HUNTER-LAB | 79.025, -27.411, 19.31 | |
| BINARY | 10101000, 11011100, 10101011 | |
| iOS - SwiftUI | Color(red: 0.65, green: 0.86, blue: 0.67) | |
| iOS - UIKit | UIColor(red: 0.65, green: 0.86, blue: 0.67, alpha: 1) | |
| Android - Compose | Color(0xFFA8DCAB) |
