Color Designer

Svelte 5 Color Picker

A simple, friendly color tool built with Svelte 5. Pick colors, fine‑tune them, and copy the codes you need—all in one place.

What you can do

• Choose two colors side‑by‑side: a foreground and a background. This makes it easy to see how they look together.
• Use the eyedropper to grab any color from your screen in one click.
• Tweak how a color looks with easy sliders for brightness, colorfulness, and hue.
• Copy ready‑to‑use color codes (HEX, HSL, and OKLCH) with a single click.
• See helpful little messages so you always know what just happened.

Why it feels nice to use

• Clear, uncluttered layout designed to stay out of your way.
• Buttons and inputs are sized to feel consistent and easy to click.
• Works well on both desktop and mobile.
• Keyboard and screen‑reader friendly.

Tips

• The small “eye” button lets you pick a color from anywhere on your screen.
• The mini color input lets you type a color or pick one from a small palette.
• Copy buttons are next to each color code—just click to copy.

Requirements

• A modern browser. The screen eyedropper works in most up‑to‑date browsers that support it.

Enjoy exploring colors!