Skip to main content
Werkzeu.ge
Dashboard
Converts HEX, RGB, HSL and CMYK and builds palettes, all in your browser. How a color prints can differ from what your screen shows.
PlusOluşturucular

Farbwerkzeug

One shade, every format. The color tool converts between HEX, RGB, HSL and CMYK, builds harmonious palettes from a base color, checks contrast against WCAG and simulates how your colors look to people with color vision deficiency - all live in the browser.

İçine bir bakış

OluşturucularFarbwerkzeugKurgusal demo | Plus
Belge önizlemesi

HEX, RGB, HSL and CMYK

HEX, RGB, HSL and CMYK
Harmonious palettes
WCAG contrast check
Simulate color blindness
Salt okunur önizleme. Kullanmak için aracı aç.

Bu güvenli önizleme, hesaba bağlı eylemler çalıştırmadan aracın ne işe yaradığını gösterir.

Farbwerkzeug neler yapar

Colors live in many notations. The designer sends you a HEX, the stylesheet wants RGB, the print shop asks for CMYK and the animation needs HSL because you can rotate the hue so nicely there. The color tool keeps all four representations in sync: change one and the others follow live. It also understands the 140 named CSS colors, so you can just type "rebeccapurple" or "tomato".

From a single base color the tool builds ready-made harmonies. Complementary, analogous, triadic, split-complementary, tetradic or monochromatic - each palette follows the classic rules of color theory and hands you several coordinated shades that work together. Ideal for a brand, a website or a chart where the colors should not clash.

The contrast checker computes the contrast ratio of two colors and tells you straight away whether it reaches the WCAG AA and AAA levels for normal and large text. Accessibility is not a nice-to-have but a legal requirement for many sites - here you see at a glance whether your text stays readable on its background.

The color-blindness simulation is the honest reality check. Roughly one in twelve men sees colors differently. The tool shows your colors as they arrive under protanopia, deuteranopia, tritanopia or full color blindness. That way you notice early if your red-green status indicator becomes indistinguishable for some of your users.

There is also a gradient generator for linear and radial gradients with multiple stops, an eyedropper to pick a color off the screen (where the browser supports it) and the option to pull colors from an uploaded image. You can name your own palettes and save them locally.

Everything runs in the browser, no account and no image or color value ever travelling to a server. Your drafts stay yours. Results copy with one click, whether you need the HEX code, the CSS gradient rule or the whole palette.

Özellikler

HEX, RGB, HSL and CMYK

All four formats live in sync. Change one and the others update instantly. CSS color names too.

Harmonious palettes

Complementary, analogous, triadic, tetradic and monochromatic from one base color per color theory.

WCAG contrast check

Contrast ratio of two colors with AA and AAA ratings for normal and large text.

Simulate color blindness

See your colors under protanopia, deuteranopia, tritanopia and achromatopsia - the honest check.

Build gradients

Linear and radial gradients with multiple stops, output as a copy-ready CSS rule.

Eyedropper and image colors

Pick a color off the screen or pull the dominant tones from an uploaded image.

Yerel çalışır, hesap gerekmez

No image and no color value leaves your device. Save your own palettes locally in the browser.

Nasıl çalışır

  1. 1

    Pick a base color

    Choose a color in the picker, enter a HEX code or type a CSS color name.

  2. 2

    Sekme seç

    Convert, palette, gradient, contrast or color blindness - depending on what you need.

  3. 3

    Adjust and check

    Switch the palette type, set a second color for contrast, or click through the simulation.

  4. 4

    Copy or save

    Copy a HEX, a CSS rule or the whole palette and save named palettes for later.

Kimin işine yarar

→Web designers keeping HEX, RGB and HSL in sync for a stylesheet.
→Developers who need to check the WCAG contrast of text and background.
→Brand designers deriving a coordinated palette from a single brand color.
→Anyone who wants to verify their colors are accessible before launch.
→Print designers who need a rough CMYK value for the print shop.

Sık sorulan sorular

What does the WCAG contrast ratio mean?

It describes the brightness difference between two colors. For normal text WCAG requires at least 4.5:1 (level AA) or 7:1 (AAA); for large text 3:1 or 4.5:1 suffices. The tool shows you which level your combination reaches.

What is the color-blindness simulation for?

About 8% of men and 0.5% of women perceive certain colors differently. The simulation shows how your colors arrive under the most common forms, so important distinctions - like red and green in a status - stay recognisable for everyone.

Why does my CMYK differ from the print?

The conversion is a mathematical approximation without a color profile. The actual print depends on paper, press and ICC profile. Use the CMYK values as a guide, but always get a proof for color-critical production.

Can I enter CSS color names?

Yes. All 140 named CSS colors are recognised, from "aliceblue" to "yellowgreen". Type the name and the tool shows you the matching HEX, RGB, HSL and CMYK values.

Görsellerim yükleniyor mu?

No. When you pull colors from an image, the image is processed purely locally in your browser. It never leaves your device and is not stored.

CSS-Kontrast-Checker

Prüfe Farbkontraste nach WCAG 2.1 AA/AAA und APCA. Farbenblindheits-Simulation, Vorschläge, P…

Farbpaletten-Extraktor

Extrahiere dominante Farben aus Bildern. HEX, RGB, HSL, OKLCH kopieren. Export als CSS, Tailw…

SVG-Umfärber

Fill- und Stroke-Farben in SVG-Icons austauschen. Vorschau, Farbpaletten-Presets, Batch-Verar…

Favicon Generator

Erstelle ein komplettes Favicon-Set mit ICO, Apple Touch Icon, Android Chrome, PWA-Manifest u…

Bild-Konverter

Wandle Bilder zwischen JPG, PNG, WebP, AVIF, GIF und BMP um. Batch-Konvertierung mit Qualität…

Barrierefreiheit

Passe Werkzeu.ge an deine Bedürfnisse an: Textgröße, Kontrast, Animationen und Legasthenie-Sc…

Farbwerkzeug için hazır mısın?

Kurulum yok. Plus planından itibaren dahil. Doğrudan tarayıcıda aç.

Şimdi aç