ZYBERMART

Installera ZYBERMART

Öppna alla verktyg från hemskärmen eller Dock, i ett eget fönster. Verktyg du har använt fungerar även offline.

Färgpalettgenerator

Skapa harmoniska färgpaletter utifrån en basfärg, och exportera dem som CSS-variabler.

Click a color to copy its HEX code.

Color harmonies explained

PaletteHuesFeel
ComplementaryBase + 180°High contrast, energetic
AnalogousBase ± 30°Harmonious, calm
TriadicBase + 120° + 240°Vibrant but balanced
Split complementaryBase + 150° + 210°Contrast with less tension
TetradicBase + 90° + 180° + 270°Rich; best with one dominant color
MonochromaticOne hue, different lightnessClean, consistent

Use the 60-30-10 rule: 60% of the design in a neutral or main color, 30% in a secondary color and 10% in an accent. Check text readability with the contrast check in the color converter.

Frequently asked questions

What is a complementary color?

The color directly opposite on the color wheel (180° away), such as orange and blue. Complementary pairs create strong contrast, which makes them good for calls to action, but they can feel loud in large areas.

Which palette type should I use for a website?

Monochromatic and analogous palettes feel calm and professional. A common approach is one main brand color, a complementary accent for buttons and links, and neutral grays for text and backgrounds.

How are the palettes calculated?

The base color is converted to HSL (hue, saturation, lightness) and its hue is rotated around the color wheel: 180° for complementary, ±30° for analogous, 120° steps for triadic, and so on. Monochromatic palettes vary the lightness instead.

How do I use the CSS export?

Copy the CSS custom properties into your stylesheet's :root and use them anywhere, for example color: var(--color-1). Changing one variable then updates every place it's used.

Relaterade verktyg

Logga in på ZYBERMART

Ha dina CV:n, fakturor, flashcards, anteckningar och sparade verktyg på alla dina enheter. Det är gratis, och verktygen fungerar likadant utan konto.

eller

Inget lösenord behövs. Genom att logga in godkänner du villkoren. Läs hur vi hanterar dina data i integritetspolicyn.

Ditt konto

När du loggar ut finns en kopia av ditt arbete kvar i den här webbläsaren. På en delad dator bör du rensa webbläsardata efteråt.

Vad vill du skapa?

Designer

Sociala medier

Dokument

Studier

Redigera

Visa alla 282 verktyg