Color Palette Generator

Create harmonious color palettes and export as Tailwind, CSS vars, or JSON

Generated Palette

#3BDFF6
#3B82F6
#513BF6
#3BF6AF
#AF3BF6

Click any color swatch to copy its hex value

Tailwind Config

module.exports = {
  theme: {
    extend: {
      colors: {
        'color-1': '#3bdff6',
        'color-2': '#3b82f6',...

CSS Variables

:root {
  --color-1: #3bdff6;
  --color-2: #3b82f6;
  --color-3: #513bf6;
  --color-4: #3bf6af;
  --color-5: #af3bf6;...

JSON Export

{
  "color1": {
    "hex": "#3bdff6",
    "rgb": "rgb(59, 223, 246)",
    "hsl": "hsl(187, 1%, 1%)"
  },...

Color Reference

#HEXRGBHSL
1#3BDFF659, 223, 246187°, 1%, 1%
2#3B82F659, 130, 246217°, 1%, 1%
3#513BF681, 59, 246247°, 1%, 1%
4#3BF6AF59, 246, 175157°, 1%, 1%
5#AF3BF6175, 59, 246277°, 1%, 1%

Help & Information

Frequently Asked Questions

A quick overview of what Apptastic Coder is about, how the site works, and how you can get the most value from the content, tools, and job listings shared here.

Apptastic Coder is a developer-focused site where I share tutorials, tools, and resources around AI, web development, automation, and side projects. It’s a mix of technical deep-dives, practical how-to guides, and curated links that can help you build real-world projects faster.

Cookie Preferences

Choose which cookies to allow. You can change this anytime.

Required for core features like navigation and security.

Remember settings such as theme or language.

Help us understand usage to improve the site.

Measure ads or affiliate attributions (if used).

Read our Cookie Policy for details.