bcf4de-cde5d7-ded6d1-eec6ca-ffb7c3
About This Kids Color Palette
This kids color palette features 5 carefully selected colors: #BCF4DE, #CDE5D7, #DED6D1, #EEC6CA, #FFB7C3. Whether you are a UI/UX designer, graphic artist, web developer, or creative professional, this palette provides everything you need — from WCAG contrast checking to one-click CSS export.
The combination creates a rich and expressive visual mood, making it ideal for both digital and print applications. Kids palettes like this one are widely used in branding, interior design, fashion, social media, and digital product design.
Complete Color Codes
HEX, RGB, HSL, and CMYK values for every color in this palette — with WCAG contrast rating:
- #BCF4DE — RGB: rgb(188, 244, 222) | HSL: hsl(156°, 72%, 85%) | CMYK: 23, 0, 9, 4 | Best contrast: black (ratio 17.13:1) (WCAG AAA)
- #CDE5D7 — RGB: rgb(205, 229, 215) | HSL: hsl(145°, 32%, 85%) | CMYK: 10, 0, 6, 10 | Best contrast: black (ratio 15.78:1) (WCAG AAA)
- #DED6D1 — RGB: rgb(222, 214, 209) | HSL: hsl(23°, 16%, 85%) | CMYK: 0, 4, 6, 13 | Best contrast: black (ratio 14.65:1) (WCAG AAA)
- #EEC6CA — RGB: rgb(238, 198, 202) | HSL: hsl(354°, 54%, 85%) | CMYK: 0, 17, 15, 7 | Best contrast: black (ratio 13.57:1) (WCAG AAA)
- #FFB7C3 — RGB: rgb(255, 183, 195) | HSL: hsl(350°, 100%, 86%) | CMYK: 0, 28, 24, 0 | Best contrast: black (ratio 12.81:1) (WCAG AAA)
Click any swatch in the Color Information section above to copy the exact value to your clipboard instantly.
How to Use This Kids Color Palette
🎨 Web & UI Design
Use the CSS Variables export to drop these colors directly into your stylesheet as
:root custom properties. Check the Contrast Checker tab to verify
WCAG 2.1 compliance — essential for accessible, production-ready designs.
🖼 Graphic Design & Branding
Download the SVG or PNG swatch and drag it into Adobe Illustrator, Photoshop, Figma, or Canva. The Figma Values export gives you exact RGB 0–1 values compatible with Figma's color picker. These kids shades pair beautifully with neutral backgrounds like off-white (#f8f7f5) or cream (#fef9ef).
💻 Development & Frameworks
The Tailwind Config export extends your tailwind.config.js in one click.
The SCSS Variables export generates a ready-to-use Sass variable map.
JSON export works with any JavaScript, Python, or design-token workflow.
🏠 Interior & Product Design
Kids color combinations like this are frequently used in home décor, packaging, and product design to evoke warmth, sophistication, or energy. Use the Shades & Tints tool to explore lighter and darker variations for wall colors, fabric choices, or product finishes.
🎭 Social Media & Marketing
Use the Gradient Builder to create eye-catching linear, radial, or conic gradients
from any two palette colors — copy the CSS background property with one click.
The UI Preview tab shows how the palette looks applied to real components like
buttons, notifications, badges, and progress bars — before you commit to a design direction.
Accessibility — WCAG 2.1 Contrast
Accessibility is non-negotiable in modern design. The built-in Contrast Checker evaluates each palette color against any background you choose:
- AAA (≥7:1) — Highest standard, ideal for body text
- AA (≥4.5:1) — Required for normal-sized text under WCAG 2.1
- AA Large (≥3:1) — Acceptable for large text and UI components
- Fail (<3:1) — Not recommended for text use
Always verify contrast ratios before finalizing your design, especially for products serving users with visual impairments.
Color Harmonies & Combinations
The Harmonies tab generates 8 color theory-based schemes from this palette's primary hue — complementary, analogous, triadic, tetradic, split-complementary, square, monochromatic, and double split-complementary. Use these to expand your palette while maintaining visual coherence.
The Color Mixer tool lets you blend any two palette colors and explore 8 intermediate steps — perfect for finding smooth transition tones for gradients, illustrations, or data visualizations.
Frequently Asked Questions
The HEX codes are: #BCF4DE, #CDE5D7, #DED6D1, #EEC6CA, #FFB7C3. Click any swatch in the Color Information section to copy instantly.
HEX, RGB, HSL, CMYK, and Figma (0–1 RGB) for every color. Export the full palette as CSS custom properties, SCSS variables, Tailwind config, JSON, PNG, or SVG.
Yes — all palettes on ColorOKX are completely free for personal and commercial projects. No attribution required.
Go to the Export & Code tab, click Figma Values, and copy the R, G, B values in 0–1 range directly into Figma's color panel.
Click the Tailwind Config export button. Paste the generated object into the theme.extend.colors section of your tailwind.config.js.
Yes — use the PNG button for a high-resolution 1000×200px swatch image, or SVG for a fully scalable vector version.
Use the Contrast Checker tab above. Select any background color and see WCAG 2.1 ratings (AAA, AA, AA Large, or Fail) for each palette color instantly.
Test each palette color against a background for WCAG accessibility compliance.
Color harmonies generated from the primary hue of your palette. Click any swatch to copy.
Lighter tints (top) and darker shades (bottom) for each palette color. Click any to copy.
Build CSS gradients from your palette colors. Mix direction and type.
Mix any two palette colors and explore intermediate steps. Click a step to copy its hex.
Live preview of your palette applied to real UI components.