Coloried

Theme Generator

Create professional, cohesive color themes for your website. Choose a preset or customize every color to match your brand.

Theme Presets
Start with a pre-designed theme or generate a random one
Primary Colors
Main brand colors
Secondary Colors
Supporting brand colors
Accent & Base Colors
Background and accent colors
Status Colors
Feedback and notification colors
Live Preview
See your theme in action

Welcome to Your Website

This is how your theme will look with different color combinations.

Success
Warning
Error
Info
Color Palette
All theme colors at a glance

#3B82F6

#60A5FA

#2563EB

#8B5CF6

#A78BFA

#7C3AED

#F59E0B

#FFFFFF

#F9FAFB

#111827

#6B7280

#E5E7EB

#10B981

#F59E0B

#EF4444

#3B82F6

Export Theme
Export your theme in various formats
:root {
  /* Primary Colors */
  --color-primary: #3B82F6;
  --color-primary-light: #60A5FA;
  --color-primary-dark: #2563EB;
  
  /* Secondary Colors */
  --color-secondary: #8B5CF6;
  --color-secondary-light: #A78BFA;
  --color-secondary-dark: #7C3AED;
  
  /* Accent & Utility */
  --color-accent: #F59E0B;
  --color-background: #FFFFFF;
  --color-surface: #F9FAFB;
  
  /* Text Colors */
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  
  /* Border */
  --color-border: #E5E7EB;
  
  /* Status Colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;
}
How to Use Your Theme

CSS Variables

Copy the CSS format and paste it in your main CSS file. Use the variables like: color: var(--color-primary)

Tailwind Config

Add the Tailwind format to your tailwind.config.js file to use colors like bg-primary

SCSS Variables

Import the SCSS format in your main SCSS file and use variables like: color: $color-primary

JSON Format

Use JSON format for JavaScript frameworks or to store your theme configuration programmatically.