Color Generator

Generate color schemes and CSS color values

Color Palette

Configure your color scheme

primary

RGB(59, 130, 246)

secondary

RGB(100, 116, 139)

accent

RGB(245, 158, 11)

background

RGB(255, 255, 255)

text

RGB(31, 41, 55)

Color Preview

See your color palette in action

Primary Color

Secondary Color

Accent Color

Sample Text

This is how your text will look with the selected colors. The background and text colors work together to create good readability.

Generated Color Code

CSSSCSS

:root {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --color-accent: #f59e0b;
  --color-background: #ffffff;
  --color-text: #1f2937;
}

.color-primary {
  color: var(--color-primary);
}

.bg-primary {
  background-color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.color-accent {
  color: var(--color-accent);
}

.bg-accent {
  background-color: var(--color-accent);
}