theaccordance / uicolors

A curated list of color palettes for use in your projects

uicolors's Issues

Export Color Palettes

In addition to copy & paste of values, offer the ability to download all the colors in a format that can easily be added to projects. Current Ideas:

• LESS stylesheet
• SASS/SCSS
• ObjC/Swift?

Ideally, these should be created from the palette json files as part of the build process.

Clicking a color chip does not copy color code to clipboard

Clicking the color chips used to copy the color value to the clipboard for use, now it doesn't.

Color value too long to display on color chip

When switching to ObjC/Swift color palettes, the color values displayed on the chips are too long to display within the color chips. The result is that the color chips grow in size when switched to these formats.

Instead of displaying the copy value in the text, it might be time to display a color breakdown instead. RGB should suffice.

Examples:

Add Logging/Analytics

Look at Mixpanel or custom logging. Initial thoughts on insights I'd like to gather:

• What colors are being copied
• What palettes are being chosen
• User flow through the app

Add Analytics

• Enable analytics to track users for app
• Track which colors are copied
• Track which color formats are chosen
• Track which palettes are chosen

Color Chip

• Visually renders color
• Displays Name
• Displays color value
• Clicking color chip sets the web app background to the color of the chip.
• Clicking the color chip copies the value of the color the user's clipboard

Add Color Format option for ObjectiveC/Swift

Add a color format enables copy & paste for use with Objective C/swift projects.

Should also look into formats for Android at the same time

Example:
[UIColor colorWithRed:0.23 green:0.35 blue:0.60 alpha:1.0]

It looks like Swift/ObjC color format is a variant of RGBA, with the RGB values between 0 & 1 instead of 0-255

Compile Palettes

Build a process that compiles the color palettes from individual json files. For each palette, build process should compile a data object consisting of:

• Name: string of the display name for the palette
• Large: numeric, column width for each chip; either 6 (2 chips/row) or 12 (1 chip/row)
• Small: numeric, column width for each chip; ideally 3 (4 chips/row) or 4 (3 chips/row)
• Palette: Array object; each object contains color name and color hex value

When each palette object is compiled, it should be assigned to a master pallettes object with a key name matching the json file which was imported.

Json file should only include name and palette values; not the Large & small numerics.

Large & Small values will be calculated during processing.

• Large: If palette.length % 2 === 1, then assign col width 12, otherwise assign col width 6
• Small: Target 3 or 4 chips per row, put together a function that looks for the mod value that doesn't leave any remainder. (color palette should be complete rows; should not have hanging chips if possible)

Show Color Values on Chips

Display the color values on the chips. Update color values based on desired output format. This will help provide value to those who's browsers are not compatible with the copy to clipboard feature.

Color Palette

• Should display name of palette
• Should display color chips within palette

Github Badge

• Badge should link back to github repo
• Octocat within badge should always match background of web app.
• Badge background should change as necessary to provide contrast.

Display small chips by default on large monitors

Based on feedback, the large color chips can be overwhelming on desktop monitors (>= 24")

Probably wise to conditionally check the viewport width and toggle the isLarge scope variable on init if it detects a large monitor. User can then toggle the large chips on at that point if they so desire.

Support Multiple Palettes

Enhance the application to support multiple palettes. Target Material Palette as the next one to provide.

Optimize production code

Tasks:

• Minify JS
• Minify CSS
• Minify HTML

Additional considerations:

• Minification should only apply to the publish process; local development should use unminified code
• Look into ways to reduce the number of calls for resources
• Will probably need to refactor JS code into a more modular system

Add copy tooltip

Add a copy tooltip to the color chips (when copying is supported) so the user knows that clicking a color will copy the value to their clipboard.

The tooltips will likely need to use the Luma function to determine the appropriate contrast.

Allow User to select the format for the color value

The user should be able to specify the format for the color value. This is a feature available on flatuicolors.com

Adding the option on the format makes it easier for a designer to get the values they need.

Formats:

• Hex (#ABCDEF)
• Hex w/o Hash (ABCEDF)
• RGB (0,128,255)
• RGBA (0,128,255,0.75)

Add testing suite

App should have tests to maintain quality

Browser Check

Check the browser when the application initializes and redirect if incompatible. Will need to determine browser compatibility with the copy function.

If the browser isn't compatible, display a sticky notification to tell the user.