Color Palette

Privacy Sketch includes a Tailwind-inspired color palette with 150+ colors. Use hex values directly or reference named colors for consistent, beautiful diagrams.

Using Colors in JSON

Colors are specified in the options object using hex format:

{
  "type": "rectangle",
  "options": {
    "fill": "#dbeafe",       // Light blue fill
    "stroke": "#3b82f6",     // Blue border
    "strokeWidth": 2
  }
}

Color Properties

For text elements, the stroke property sets the text color:

{
  "type": "text",
  "text": "Hello World",
  "options": {
    "stroke": "#1e293b"   // Text color
  }
}

Quick Reference - Common Colors

These are the most frequently used colors for diagrams:

Full Color Palette

Complete Tailwind-inspired palette. Click any color to copy its hex value.

Slate (Neutral)

Red

Amber

Green

Blue

Indigo

Pink

Recommended Background Colors

These colors work great as canvas or shape backgrounds:

Color Best Practices

1. Use 100-level for fills, 500-level for strokes

For readable, professional diagrams, use light shades (50-200) for shape fills and darker shades (500-700) for borders:

{
  "options": {
    "fill": "#dbeafe",      // blue.100 (light)
    "stroke": "#3b82f6"     // blue.500 (saturated)
  }
}

2. Limit your palette to 2-3 colors

Professional diagrams use a limited color palette. Pick one primary color and optionally an accent:

3. Use slate for text and borders

Always use dark slate colors for text to ensure readability:

{
  "type": "text",
  "options": { "stroke": "#1e293b" }  // slate.800
}