A simple tool for designers and developers. Browse over 200 curated colors across 12 categories and instantly copy Hex or RGB values for your web design, app design, or any digital project.
Click any of the 12 category buttons at the top — Pastel, Muted, Red, Pink, Orange, Yellow, Purple, Green, Blue, Brown, White, or Gray — to browse that color family. Each category contains carefully curated colors suited to different design contexts.
Toggle between List and Grid view using the icons below the category buttons. List view displays each color alongside its Hex code, RGB value, and name — ideal for reading exact values. Grid view shows larger swatches for quick visual browsing.
In List view, click directly on any Hex code, RGB value, or color name to instantly copy it to your clipboard. A confirmation message briefly appears at the bottom of the screen. In Grid view, click a swatch to open a detail panel, then click the value you need.
Paste the copied value directly into CSS, Figma, Sketch, Adobe XD, or any code editor. Hex codes (e.g., #FF5733) work in all contexts; RGB values (e.g., rgb(255, 87, 51)) are especially useful when you need transparency via RGBA.
Color is one of the most powerful elements in visual design. Before a user reads a single word or clicks a single button, color has already communicated mood, tone, and intent. The right palette builds trust, guides attention, and makes an interface feel cohesive. The wrong combination creates visual noise and erodes confidence in the product.
For web designers, a consistent color system establishes hierarchy across pages — primary colors draw attention to calls-to-action, secondary colors add depth, and neutral tones provide breathing room for content. For developers, defining colors as CSS variables or design tokens early in a project saves hours of rework later. When a brand color needs updating, a single change propagates everywhere.
A well-structured palette typically includes one or two primary brand colors, one or two supporting accent colors, and a set of neutral tones for backgrounds and body text. Start by identifying the core emotion your project should convey, then select colors that align with those values. Always test your palette across both light and dark backgrounds to ensure sufficient contrast for readability and accessibility compliance.
For a comprehensive breakdown of each color category — including usage examples, design tips, and CSS implementation guidance — see our Complete Color Guide for Designers and Developers.
A color palette is a curated set of colors used consistently across a design project. It defines the visual identity of a website, app, or brand by specifying which colors appear on backgrounds, text, buttons, icons, and accents. A well-chosen palette creates visual harmony and helps users navigate your interface more intuitively, reducing cognitive load and reinforcing brand recognition.
Use Hex values directly in any CSS color property: color: #3A86FF; or background-color: #3A86FF;. RGB values work the same way: color: rgb(58, 134, 255);. For semi-transparent effects, convert to RGBA by adding an alpha value between 0 and 1: background-color: rgba(58, 134, 255, 0.5);. To maintain consistency across a project, store your palette colors as CSS custom properties: --color-primary: #3A86FF;
Hex (hexadecimal) codes represent a color as a 6-digit alphanumeric string prefixed with # (e.g., #3A86FF). RGB values express the same color as three separate numbers for the Red, Green, and Blue channels, each ranging from 0 to 255 (e.g., rgb(58, 134, 255)). Both formats are fully supported in all modern browsers and design tools. The choice between them is largely a matter of workflow preference — Hex codes are more compact, while RGB makes channel values more legible.
Pastel colors are soft, light tones produced by mixing a pure hue with white or a high degree of lightness. They are characterized by low to medium saturation and high brightness, which gives them an airy, gentle quality. Pastels are extensively used in UI design, product packaging, and brand identities aimed at conveying calm, warmth, or approachability — particularly common in lifestyle apps, wellness brands, and children's content.
Muted colors are desaturated versions of standard hues, often described as dusty, earthy, or faded. Unlike pastels which increase lightness, muted tones reduce vibrancy while preserving depth and warmth. This restraint makes them feel mature and sophisticated. Muted palettes are a common choice for editorial design, artisan brands, high-end retail, and minimalist interfaces where subtlety is valued over intensity.
Yes. All color values in this tool are standard CSS and web colors. Color values — Hex codes and RGB numbers — are not subject to copyright or licensing restrictions. Every color shown here is completely free to use in any personal or commercial project without attribution required.
List view displays each color in a horizontal row showing the swatch alongside its Hex code, RGB value, and color name — ideal for scanning exact values and comparing specific colors side by side. Grid view arranges colors as large square swatches in a compact layout, giving you a broad visual overview of the entire palette at once. In Grid view, click any swatch to open a detail panel with all of the color's values.
This tool contains over 200 curated colors organized across 12 categories: Pastel (60 colors across 6 hue groups), Muted (70 colors across 7 hue groups), and 10 named color families — Red, Pink, Orange, Yellow, Purple, Green, Blue, Brown, White, and Gray. Every color includes its Hex code and RGB value, ready to copy and use immediately.