https://github.com/timjentzsch/color-id

A tool to determine the names of colors.
https://github.com/timjentzsch/color-id

a11y color

Last synced: 13 days ago
JSON representation

A tool to determine the names of colors.

• Host: GitHub
• URL: https://github.com/timjentzsch/color-id
• Owner: TimJentzsch
• License: mit
• Created: 2021-05-05T11:47:55.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-23T16:15:45.000Z (10 months ago)
• Last Synced: 2024-12-15T23:30:09.094Z (19 days ago)
• Topics: a11y, color
• Language: Svelte
• Homepage: https://color-id.timjen.net
• Size: 390 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Color ID ![License](https://img.shields.io/github/license/TimJentzsch/color-id)

A tool to get various information about colors. Available at .

## Features

### Color Identification

Get an easy-to-understand description of each color.

This is especially useful for color-deficient users.

![Screenshot of the color identification feature. It identifies hsl(86, 100%, 26%) as "Dark green".](images/color-identification.jpg)

### Color Composition

View the composition of the color in different color spaces.

Move around the sliders to experiment with different colors.

![Screenshot of the color composition feature. It shows the composition in the RGB, HSL and HSV color spaces. Each of the parameters can be modified with a slider.](images/color-composition.jpg)

### Similar CSS Colors

Identify named CSS colors that look similar to the given color.

![Screenshot of the similar CSS colors feature. It determined that "olivedrab", "forestgreen", "green", "darkolivegreen", "olive", "darkgreen", "seagreen" and "mediumseagreen" are the visually closest named CSS colors.](images/similar-css-colors.jpg)

### Accessbility

Check the contrast of two colors based on the WCAG accessibility guidelines.

If a contrast check fails, a similar looking color with better contrast is recommended.

![Screenshot of the accessibility feature. It shows a second color selector and previews the two colors next to each other. Furthermore it shows if the WCAG contrast requirements pass and recommends better colors otherwise.](images/accessibility.jpg)