Searchlight
Tools
BlogAbout
Free SEO Audit
Back to home
๐Ÿ“ˆSEO & Analytics
๐Ÿ—‚๏ธText & Data
๐Ÿ”Encoders & Decoders
โšกGenerators
UUID GeneratorPassword GeneratorLorem IpsumRandom GeneratorBarcode GeneratorFake Data GeneratorColor PaletteGradient GeneratorBox Shadow Builder.htaccess Generatorrobots.txt BuilderMeta Tag GeneratorCSS Filter Generator
๐Ÿ”„Converters
๐Ÿ–ผ๏ธImage Tools
๐Ÿ“„PDF Tools
๐Ÿ’ปCode Tools
๐Ÿ”Regex & Parsing
๐ŸงฎCalculators
๐Ÿ—บ๏ธDiagrams
๐ŸŒNetwork & Web
โœ๏ธText Utilities
๐ŸŽจColor Tools
๐Ÿ”€Diff & Compare
148+ tools. OAuth is read-only.
Searchlight

148+ free SEO, developer, image, PDF, and productivity tools - no account needed.

Free ยท all tools included
Company
  • Blog
  • About
  • Free SEO Audit
Legal
  • Privacy Policy
  • Terms of Service
  • Cookie Policy

ยฉ 2026 Searchlight. All rights reserved.

Read-only OAuth ยท No data reselling ยท Completely free

Color Palette Generator

Generate tints, shades, and harmonious color schemes from any hex color. Click a swatch to copy its hex value.

Base
#3b5bff
Base
Tints (lighter)
#ccd4ff
Tint 1
#99aaff
Tint 2
#667fff
Tint 3
#3355ff
Tint 4
#002aff
Tint 5
Shades (darker)
#0022cc
Shade 1
#001999
Shade 2
#001166
Shade 3
#000833
Shade 4
#00041a
Shade 5
Complementary
#ffdf3d
Complement
Analogous
#7e3dff
+30ยฐ
#3dbeff
-30ยฐ
Triadic
#ff3d5e
+120ยฐ
#5eff3d
+240ยฐ

About this tool

Generate harmonious colour palettes from a base colour - complementary, analogous, triadic, split-complementary, tetradic, and monochromatic schemes. Also extract palettes from uploaded images. Export as CSS variables, Tailwind config, JSON, or Adobe Swatch (ASE). Build consistent, beautiful colour systems for your brand or design project.

How to Generate a Colour Palette

  1. 1Enter your base colour as HEX, RGB, or use the colour picker.
  2. 2Select a harmony type: complementary, analogous, triadic, etc.
  3. 3Preview the palette swatches and adjust the base colour if needed.
  4. 4Click any swatch to copy its HEX value.
  5. 5Export as CSS variables or Tailwind config for use in your project.

Frequently Asked Questions

What are the main colour harmony types?+
Complementary: opposite colours on the wheel (high contrast). Analogous: adjacent colours (harmonious, natural). Triadic: three evenly spaced colours (vibrant). Split-complementary: a colour plus two adjacent to its complement (softer contrast). Tetradic: four colours forming a rectangle.
How do I extract a colour palette from an image?+
Upload your image (photo, logo, screenshot) and the tool uses k-means clustering to identify the dominant colours. This is how design tools like Canva and Adobe Color extract brand palettes from images.
What are CSS custom properties for colour palettes?+
CSS custom properties (variables) like --color-primary allow you to define your palette once and use it everywhere. Changing the variable updates every element that references it.
How many colours should a brand palette have?+
A practical brand palette has 3-5 colours: 1 primary, 1-2 secondary/accent, 1-2 neutral. For a complete design system, each colour needs 9-11 tints (100-900 scale) like Tailwind's colour system.
Looking for a deeper guide on this topic? Browse the Searchlight blog.
Visit the blog โ†’

Related tools

View all Generators โ†’
UUID GeneratorUUID v4 bulk generator - formats & copy allPassword GeneratorConfigurable rules, strength meterLorem IpsumGenerate placeholder text by paragraphs, sentences, or wordsRandom GeneratorRandom numbers, strings, arrays