 | Flat UI Color PickerBrowse, filter by shade, and copy Flat UI color codes in HEX, RGB, HSL, and CMYK formats Installation Launch VS Code Quick Open ( Ctrl+P), paste the following command, and press enter.Copied to clipboard |
Flat UI Color Picker
Features
Prerequisites
InstallationFrom a
|
| Action | How |
|---|---|
| Browse all colors | Select All in the left sidebar |
| Filter by family | Click a family name (e.g., Blue, Green) in the sidebar |
| Search | Type in the search box (top-right) — matches name, hex, or family |
| Copy a color | Click any color card — the value is copied to your clipboard |
| Change format | Click HEX, RGB, HSL, or CMYK in the toolbar before (or after) clicking a card |
A confirmation toast appears at the bottom-right of the panel after each copy, showing the exact value that was copied.
Color Families
| Family | Colors | Sample |
|---|---|---|
| Turquoise | 7 | #1ABC9C Turquoise, #16A085 Green Sea |
| Green | 7 | #2ECC71 Emerald, #27AE60 Nephritis |
| Blue | 7 | #3498DB Peter River, #2980B9 Belize Hole |
| Purple | 7 | #9B59B6 Amethyst, #8E44AD Wisteria |
| Dark | 5 | #2C3E50 Midnight Blue, #34495E Wet Asphalt |
| Yellow | 6 | #F1C40F Sun Flower, #F9BF3B Golden Rod |
| Orange | 7 | #E67E22 Carrot, #D35400 Pumpkin |
| Red | 7 | #E74C3C Alizarin, #C0392B Pomegranate |
| Pink | 7 | #FF69B4 Hot Pink, #F75172 Brink Pink |
| Brown | 7 | #795548 Brown, #5D4037 Chocolate |
| Gray | 7 | #ECF0F1 Clouds, #BDC3C7 Silver |
Supported Color Formats
| Format | Example output |
|---|---|
| HEX | #3498DB |
| RGB | rgb(52, 152, 219) |
| HSL | hsl(204deg, 70%, 53%) |
| CMYK | cmyk(76%, 31%, 0%, 14%) |
Development
# Watch mode (auto-recompile on save)
npm run watch
# Type-check without emitting
npm run check-types
# Production build
npm run package
Press F5 in VS Code to launch an Extension Development Host for live testing.
Contributing
- Fork the repository and create a feature branch.
- Make your changes and ensure
npm run check-typespasses with no errors. - Open a pull request with a clear description of your changes.