Color Picker

Palette • Contrast • Gradient

Pilih dan eksplorasi warna, buat palet, cek kontras, dan generate gradient dengan alat yang lengkap.

Pilih Warna

Warna Terbaru

RGB Values

HSL Values

Background untuk Kontras

RGB: (45, 121, 199)

HSL: (210, 63%, 48%)

AA (Large)4.5:1AA failAAA failLarge AA

Headline Text Example

Body text preview looks like this paragraph over the selected background color. This helps you visualize how readable your text will be.

Inverted Preview

Headline Text Example

This shows how text looks when your color is used as a background instead.

Color PaletteKlik untuk copy, Alt+Klik untuk copy CSS variable

Gradient Builder

Angle: 45°

Design Tokens

CSS Variables

:root {
  --brand: #2D79C7;
  --brand-foreground: #000000;
  --brand-50: #3E84CB;
  --brand-100: #4D8DCF;
  --brand-200: #6CA1D8;
  --brand-300: #8CB5E0;
  --brand-400: #ABC9E9;
  --brand-500: #2D79C7;
  --brand-600: #24619F;
  --brand-700: #1D4F81;
  --brand-800: #14365A;
  --brand-900: #0B1E32;
}

Tailwind Configuration

// tailwind.config.ts
theme: {
  extend: {
    colors: {
      brand: {
      50: 'var(--brand-50)',
      100: 'var(--brand-100)',
      200: 'var(--brand-200)',
      300: 'var(--brand-300)',
      400: 'var(--brand-400)',
      500: 'var(--brand-500)',
      600: 'var(--brand-600)',
      700: 'var(--brand-700)',
      800: 'var(--brand-800)',
      900: 'var(--brand-900)'
      }
    }
  }
}