Terracotta Garden
earth
warm
natural
#E2725B
RGB
226, 114, 91
HSL
10.2°, 69.9%, 62.2%
#D4A373
RGB
212, 163, 115
HSL
29.7°, 53.0%, 64.1%
#FAEDCD
RGB
250, 237, 205
HSL
42.7°, 81.8%, 89.2%
#CCD5AE
RGB
204, 213, 174
HSL
73.8°, 31.7%, 75.9%
#606C38
RGB
96, 108, 56
HSL
73.8°, 31.7%, 32.2%
Frequently Asked Questions
What colors are in the Terracotta Garden palette?
This palette contains 5 colors: #E2725B, #D4A373, #FAEDCD, #CCD5AE, #606C38. Click on any color swatch above to explore its full detail page.
How do I use this palette in CSS?
Define CSS custom properties for each color:
--color-1: #HEX; then reference them throughout your stylesheet. Click "Copy all hex codes" above to get all values at once.
Can I customize this palette?
Use this palette as a starting point. Click any color to visit its detail page where you'll find shades (lighter and darker variations), harmonies (complementary, analogous, triadic), and tools to generate related colors.
What color formats are supported?
Each color card shows HEX and RGB values. Click through to the color detail page for additional formats including HSL, HSV, CMYK, and OKLCH — covering web, print, and modern CSS needs.
Are the colors in this palette accessible?
Accessibility depends on how you pair colors. Each color's detail page shows WCAG contrast ratios. Use our Contrast Checker to test any two palette colors together for AA/AAA compliance.
How do I copy all colors at once?
Click the "Copy all hex codes" button above the FAQ section. This copies all 5 hex values as a comma-separated list to your clipboard.
What design tools work with these colors?
HEX codes work in virtually every design tool — Figma, Sketch, Adobe XD, Photoshop, Illustrator, Canva, and CSS. Copy a code from this page and paste it directly into the color picker of your preferred tool.
How were these palette colors selected?
Our curated palettes are designed based on color theory principles — complementary, analogous, or thematic relationships. Each palette is tested for visual harmony and practical usability in UI and graphic design.
Can I use this palette for web design?
Absolutely. All colors are provided as HEX codes ready for CSS. For a Tailwind-style workflow, use our Shade Generator to create 50–950 shade scales from any palette color.
Where can I find more palettes?
Browse our full collection on the Palettes page. You can also generate custom palettes from any color using the Palette Generator tool.