Create beautiful color palettes with Palettebro
Create professional color schemes in minutes with the precision of a design expert. To use Palettebro please use a screen with a width of at least 1024px.
Step 1
Find the perfect palette
Explore palette variants and presets to find the perfect palette for your project. Every combination is designed to be accessible and beautiful.
Step 2
Make it yours
Use the color picker to change palette colors and the to lock one or more colors to keep them from being changed. Explore all the color tokens in your palette and the accessibility grades.
Step 3
Use the palette
Download the palette or use the @palettebro/tailwind plugin in your Tailwind application:
1@plugin '@palettebro/tailwind' { 2 variant: 'mui'; 3 primary: #A1B56C; 4}
How it works
Choose a palette variant
Palettebro offers four modes of palette generation using different color theory techniques and technologies to create harmonious color combinations:
Intelligent color combinations
Explore palette presets
Each palette variant features a selection of presets designed to evoke a specific mood, style, and aesthetic. Explore presets to quickly find the perfect color combination for your design:
A variation of complementary colors where one base color is matched with two adjacent colors from its complement, creating bold but balanced schemes with less tension than pure complementary pairs.
Uses four colors arranged into two complementary pairs on the color wheel, offering rich, dynamic possibilities. Ideal for complex designs needing multiple distinct color areas while maintaining harmony.
Three colors equally spaced on the color wheel, providing high contrast while retaining harmony. Offers excellent visual interest and balance, making it suitable for energetic designs that need to remain cohesive.
Progressive shifting of hues across elements, creating subtle color transitions. Great for modern interfaces wanting smooth visual flow and subtle differentiation between elements.
Utilizes varying shades and tones of colors to create dimensional effects and hierarchy. Essential for designs needing clear visual layers and spatial relationships.
Two-color palette using varying intensities and overlays, creating striking visual effects. Popular in editorial design and hero images for bold, memorable impressions.
Raw, high-contrast color combinations with intentionally jarring juxtapositions. Embraces digital-native aesthetics with bold, sometimes uncomfortable color choices for maximum impact.
Subtle, transparent color variations mimicking frosted glass effects. Perfect for modern UI design wanting depth and layering while maintaining lightness.
High-saturation neons contrasted with dark backgrounds, often including electric blues and magentas. Ideal for futuristic, tech-focused designs needing energy and edge.
Pastel purples, pinks, and teals with retro influence. Creates nostalgic yet contemporary feels, perfect for designs playing with 80s-90s aesthetic references.
Combines vintage color schemes with modern neon accents, mixing warm nostalgic tones with futuristic highlights. Great for designs bridging past and future aesthetics.
Why Palettebro?
Features
Palettebro is a tool that helps you create meaningful color palettes in minutes.
Automatically generate a dark mode color palette.
Palettebro uses P3 colors for a more vibrant and accurate color palette.
Automatically check WCAG contrast ratios for accessibility.
All colors are available as CSS variables.
1:root {
2 --color-background: oklch(0.95 0.01 280);
3 --color-foreground: oklch(0.05 0.01 280);
4 --color-secondary-50: oklch(13.57% 0.05 358.46);
5 --color-secondary-100: oklch(20.04% 0.08 359.38);
6 --color-secondary-200: oklch(30.15% 0.12 359.69);
7 --color-secondary-300: oklch(39.37% 0.15 0.31);
8 --color-secondary-400: oklch(48.12% 0.19 359.72);
9 --color-secondary-500: oklch(56.94% 0.22 359.87);
10 --color-secondary-600: oklch(65.46% 0.24 359.78);
11 --color-secondary-700: oklch(74.17% 0.16 359.96);
12 --color-secondary-800: oklch(82.94% 0.10 0.21);
13 --color-secondary-900: oklch(91.38% 0.04 0.12);
14 --color-secondary-950: oklch(95.74% 0.02 0.52);
15 --color-accent: oklch(66.30% 0.21 29.94);
16 --color-on-accent: oklch(18.31% 0.02 28.53);
17 ...
18}Use AI to generate color schemes based on your preferences.
Open Source
100% Open Source
Palettebro is 100% open source. You can view and contribute to the source code on GitHub.
Frequently Asked Questions
Answers to common questions
Unlimited generative palettes
Get more with Premium
Get access to all the features of Palettebro with a Premium subscription.
Go unlimited with Premium
Get access unlimited access to generative palettes and more.
Primary
Secondary
Accent