Colors — Examples

Back to the overview: Colors · Open the tool live: www.jpkc.com/tools/colors/

The manual explains every area and option in detail. This page adds concrete workflows: typical tasks, played through step by step. The interface is in English, so the tab and button names below match what you see on screen.

Example 1: Translate a brand color into every CSS format

You have a HEX color from the style guide and need it as oklch() for modern CSS — or as rgba() for the legacy stylesheet.

1. Open the Color Picker and type the value into the Enter a color value field (e.g. #336699). The visual picker and the preview update instantly.
2. Look at the Color Formats card. The same color appears there in 14 notations — from HEX through HSL and HWB to OKLCh and the wide-gamut spaces.
3. Need more or fewer decimals? Change Precision at the top (2, 3, 4, 5, or 8; default 3). Handy when oklch() gets too long or you want it rounded for documentation.
4. Click the copy button next to the format you want. Done — the value is on your clipboard.

That turns a single HEX code into whatever notation your stylesheet, design token or canvas code needs, in seconds.

Example 2: Derive a color palette from a base color

You have a primary color and need matching accent and step tones to go with it.

1. Pick your base color in the Color Picker.
2. Go to the Color Harmonies card. For a strong second accent, take Complementary or one of the two Split-Complementary colors; for a calm, related look, the Analogous tones.
3. Need a full lightness ramp (for buttons, hover states and surfaces), use Shades (darker), Tints (lighter) and Tones (desaturated) — together they form a consistent scale around your base color.
4. Click a swatch to copy its HEX value and add it to your token list.

Because the harmonies are computed in the OKLCH space, the lightness and saturation steps feel more even than a plain HSL calculation would give.

Example 3: Secure text contrast against WCAG and APCA

Before a text/background combination ships, you want to know whether it is accessible.

1. Enter the text color in the Color Picker (it is the foreground of the contrast checker).
2. Scroll down to the Contrast Checker and set the background color in the Background Color field. The preview shows large and small text live on that background. Mixed them up? The Swap button flips foreground and background.
3. Read the WCAG 2.1 result: the ratio (e.g. 4.7 : 1) and the four badges AA Large (≥ 3), AA Small (≥ 4.5), AAA Large (≥ 4.5) and AAA Small (≥ 7). For ordinary body text, AA Small is the bar to clear.
4. Also glance at APCA: the Lc value with the thresholds Body Text (Lc ≥ 75) and Large Text (Lc ≥ 60). APCA weights lightness more realistically and is the proposed WCAG 3 successor.
5. If it falls short, nudge the text color darker or lighter in the picker — via Color Harmonies → Shades/Tints you find a variant that keeps the same hue but clears the contrast. Right next to it, the Color Blindness Simulator tells you whether the pair stays distinguishable under red-green deficiency.

Example 4: Build a CSS gradient for a hero area

You need a gradient as a background — quick, but configurable.

1. Switch to the Gradient Generator tab and choose the Gradient Type (usually Linear).
2. Set the direction: either via one of the eight preset directions or via Custom Angle (slider/number field, 0–360°).
3. Set the Color Stops. Click a color value to change it in the picker; Add Stop adds a third or fourth point and lets you give its position (e.g. 50%). No idea where to start? A preset gives you a base you then adjust.
4. Copy the CSS Output into your stylesheet at the bottom — or the Tailwind CSS line if you work with utility classes. (Note the caveat: Tailwind can natively do only linear gradients with two to three stops.)

Example 5: Create soft elevation shadows as design tokens

You want a consistent shadow system across three height tiers instead of guessing every box-shadow by hand.

1. Open the Box Shadow tab and stay in the Shadow Palette sub-tab.
2. Under Color, set the Background Color to your UI's real surface and leave Tint shadow with background hue on — that gives the shadow a slight color cast from the background and looks more natural than pure black.
3. Adjust the Light Position (Angle/Distance) and the Tuning (Oomph for intensity, Crispy for sharpness, Resolution for the number of layers — at Normal, the Low/Medium/High tiers use 2/3/6). The preview shows the three tiers Low/Medium/High at once.
4. Copy the CSS Custom Properties (--shadow-elevation-low/medium/high) into your stylesheet and apply them with box-shadow: var(--shadow-elevation-medium);. Need a runnable demo, take the Full HTML + CSS Snippet instead.

For a single, hand-stacked shadow (ambient plus contact, say), switch to the Single Shadow sub-tab and build the layers individually — including inset for inner shadows.

Example 6: Pull a palette from an image and export it

A photo or logo should become a coordinated color palette.

1. Go to the Image Color Scheme tab and drag an image into the Drag & drop zone (or pick it via Browse files). Allowed are PNG, GIF, JPG, WebP, AVIF, BMP and SVG up to 25 MB. The image stays on your device — analysis runs locally in the browser.
2. The Dominant Color and up to ten further Extracted Palette colors appear immediately.
3. Sort the palette with the Sort switches by Lightness, Saturation or Hue to bring structure in — light to dark for a ramp, for instance. The separate dominant-color card stays put.
4. Choose the target format in the Export menu — CSS Variables, SCSS Variables, Tailwind Config, JSON, Array (JS) or Array (PHP) — and copy the block straight into your project.

Tip: if the picture needs cropping or resizing first, do it in the Graphic Editor and drop the result in here.

---

Go deeper: the overview for the big picture, the manual for every option in detail, and the tips & tricks for tricks and pitfalls. You can try all of it directly in the tool.