Generator Paletă Culori Accesibilă

Alege o culoare de brand și obține automat o paletă completă care respectă cerințele WCAG de contrast.

Alege culoarea principală

Selector culoare

Palete predefinite:

Paleta generată

Primary 100

Fundal ușor

2.03:1AAAAA

10.36:1AAAAA

Primary 300

Hover / borduri

3.53:1AAAAA

5.95:1AAAAA

Primary 500

Culoare principală

6.18:1AAAAA

3.40:1AAAAA

Primary 700

Text pe fundal deschis

9.91:1AAAAA

2.12:1AAAAA

Primary 900

Text intens

15.67:1AAAAA

1.34:1AAAAA

Secundar

Culoare complementară

2.35:1AAAAA

8.95:1AAAAA

Accent

Evidențiere / CTA

6.09:1AAAAA

3.45:1AAAAA

Fundal Deschis

Fundal pagină (light)

1.08:1AAAAA

19.41:1AAAAA

Fundal Întunecat

Fundal pagină (dark)

17.49:1AAAAA

1.20:1AAAAA

Text Deschis

Text pe fundal deschis

17.00:1AAAAA

1.24:1AAAAA

Text Întunecat

Text pe fundal întunecat

1.20:1AAAAA

17.55:1AAAAA

Previzualizare combinații

Mod deschis

Acesta este un exemplu de text pe fundal deschis. Contrastul trebuie să fie de minim 4.5:1.

Buton PrimaryButon Accent

Mod întunecat

Acesta este un exemplu de text pe fundal întunecat. Culorile trebuie verificate și pentru dark mode.

Buton PrimaryButon Secundar

Exportă paleta

CSS Custom Properties

:root {
  --color-primary-100: #98b6f6;
  --color-primary-300: #5685eb;
  --color-primary-500: #1a56db;
  --color-primary-700: #123c97;
  --color-primary-900: #051f57;
  --color-secundar: #d7a028;
  --color-accent: #7e20f8;
  --color-fundal-deschis: #f4f6fa;
  --color-fundal-intunecat: #10192e;
  --color-text-deschis: #141c2e;
  --color-text-intunecat: #e6ebf4;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
      'primary-100': '#98b6f6',
      'primary-300': '#5685eb',
      'primary-500': '#1a56db',
      'primary-700': '#123c97',
      'primary-900': '#051f57',
      'secundar': '#d7a028',
      'accent': '#7e20f8',
      'fundal-deschis': '#f4f6fa',
      'fundal-intunecat': '#10192e',
      'text-deschis': '#141c2e',
      'text-intunecat': '#e6ebf4',
      },
    },
  },
};

Despre contrastul WCAG

AA Normal: contrast minim 4.5:1 pentru text normal
AA Mare: contrast minim 3:1 pentru text mare (18pt+)
AAA Normal: contrast minim 7:1 pentru cel mai înalt nivel
Formula luminanță relativă: L = 0.2126R + 0.7152G + 0.0722B
Raport contrast: (L1 + 0.05) / (L2 + 0.05)

Se încarcă...

Paleta generată

Primary 100

Fundal ușor

2.03:1AAAAA

10.36:1AAAAA

Primary 300

Hover / borduri

3.53:1AAAAA

5.95:1AAAAA

Primary 500

Culoare principală

6.18:1AAAAA

3.40:1AAAAA

Primary 700

Text pe fundal deschis

9.91:1AAAAA

2.12:1AAAAA

Primary 900

Text intens

15.67:1AAAAA

1.34:1AAAAA

Secundar

Culoare complementară

2.35:1AAAAA

8.95:1AAAAA

Accent

Evidențiere / CTA

6.09:1AAAAA

3.45:1AAAAA

Fundal Deschis

Fundal pagină (light)

1.08:1AAAAA

19.41:1AAAAA

Fundal Întunecat

Fundal pagină (dark)

17.49:1AAAAA

1.20:1AAAAA

Text Deschis

Text pe fundal deschis

17.00:1AAAAA

1.24:1AAAAA

Text Întunecat

Text pe fundal întunecat

1.20:1AAAAA

17.55:1AAAAA

Exportă paleta

CSS Custom Properties

:root {
  --color-primary-100: #98b6f6;
  --color-primary-300: #5685eb;
  --color-primary-500: #1a56db;
  --color-primary-700: #123c97;
  --color-primary-900: #051f57;
  --color-secundar: #d7a028;
  --color-accent: #7e20f8;
  --color-fundal-deschis: #f4f6fa;
  --color-fundal-intunecat: #10192e;
  --color-text-deschis: #141c2e;
  --color-text-intunecat: #e6ebf4;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
      'primary-100': '#98b6f6',
      'primary-300': '#5685eb',
      'primary-500': '#1a56db',
      'primary-700': '#123c97',
      'primary-900': '#051f57',
      'secundar': '#d7a028',
      'accent': '#7e20f8',
      'fundal-deschis': '#f4f6fa',
      'fundal-intunecat': '#10192e',
      'text-deschis': '#141c2e',
      'text-intunecat': '#e6ebf4',
      },
    },
  },
};