Dark Mode

Color Palette Viewer

Paste Your Color Variables

🎨 Ready to view your colors!

Paste your CSS color variables above and click "Parse Colors" to see your palette.

Your Brand Website

Welcome to Our Platform

This is how your color palette looks in action. All the colors are applied using CSS variables that match your input.


Muted Section

This section uses your muted colors to show secondary content that doesn't compete with the main content.

Another Card Example

Cards use your card background and foreground colors, with borders defined by your border color.

Popover Component
Uses popover colors for tooltips and dropdowns.

© 2024 Your Company. This footer uses muted colors.

Supported Formats:

• CSS Variables: --primary: #3b82f6; • Hex: #3b82f6 or #fff • RGB: rgb(59, 130, 246) or rgba(59, 130, 246, 0.5) • HSL: hsl(217, 91%, 60%) or hsla(217, 91%, 60%, 0.8) • HSL Values: 217 91% 60% (without hsl wrapper) • Named Colors: red, blue, green, etc.