Working with the whimsical collection color palette
This collection groups colors tagged for whimsical. It includes Color by Number (#A3C1DA), Heliotrope (#DF7E9A), so you can compare each swatch side by side before applying it to a project. The color pages linked below show additional values and calculated tints, shades, and relationships that can help when refining a scheme.
When using the whimsical collection palette, start by assigning each color a role. A dominant color can establish the main surface or large visual area; supporting shades can organize sections; and a brighter or darker accent can draw attention to a small number of controls or details. The exact balance depends on the image, typography, and material around the colors, so treat the swatches as a starting point and preview them in context.
For digital interfaces, check contrast for text, icons, and focus states rather than relying on hue alone. For print, compare a proof because paper, ink, and color profiles can shift the result. Open any color link to copy its HEX, RGB, HSL, or CMYK reference values. Keeping those values in a shared design token list helps maintain consistency as the palette is reused across pages and assets.
Frequently asked questions about this palette
What is in the whimsical collection palette?
This palette currently includes Color by Number (#A3C1DA), Heliotrope (#DF7E9A).
How can I use the whimsical collection palette?
Use one color as the dominant surface, a second for supporting elements, and reserve an accent for emphasis. Check text contrast in your final layout.
Can I use these colors for web design?
Yes. Copy a color's HEX value from its color-code page, then test text and interface combinations for readable contrast.
How do I adjust this color palette?
Compare the swatches with your project imagery and brand colors. Adjust brightness or saturation in your design tool, then retest contrast and consistency.