# Colors — Examples

> Hands-on walkthroughs with Colors: translate a color into CSS formats, harden contrast, build a gradient, create elevation shadows, and pull palettes from images.

Source: https://www.jpkc.com/db/en/tools/colors/examples/

Back to the overview: [Colors](https://www.jpkc.com/db/en/tools/colors/) · Open the tool live: [www.jpkc.com/tools/colors/](https://www.jpkc.com/tools/colors/)

The [manual](https://www.jpkc.com/db/en/tools/colors/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](https://www.jpkc.com/tools/colors/) 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](https://www.jpkc.com/db/en/tools/graphic/)** and drop the result in here.

---

Go deeper: the [overview](https://www.jpkc.com/db/en/tools/colors/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/colors/manual/) for every option in detail, and the [tips & tricks](https://www.jpkc.com/db/en/tools/colors/tips/) for tricks and pitfalls. You can try all of it directly in the [tool](https://www.jpkc.com/tools/colors/).