I think it would be useful :) - although it's only in Korean now, maybe you can add an English version later.

I like your open-colo schemer, but I cant seem to be able to print off any of the swatches even when I set printer to print background colours.
I will be using the SCSS file as a partial file importing to main style file.
I can,t print colours on any of the other program swatches which makes it difficult to choose without having swatches front of you. Am I dealing with it in the right way, I am using RUBY plus SASS and SUSY as a preprocessor, but placing scss file in SASS directory for import(Partial file)
Thank you Brianran

Hey,

css custom properties are close to being supported in all evergreen browsers, yeah 🎉 .
However, the color function is not anywhere close to being released. This means, if you want to use a color that has transparency without a pre-processor you need the raw rgb values.

For this I would ask you to add rgb values to the css colors, maybe like so:

--oc-orange-9: #d9480f;
--oc-orange-9-rgb: 217, 72, 15;

It is important that only the three values are specified, NOT rgb because this way you can do the following:

background: rgba(var(--oc-orange-9-rgb), .5);

This would make open-colors work with native css custom properties inside rgba so transparency can be set by the user, which would be awesome.

• Contrast (Enhanced):Understanding SC 1.4.6
• Reference: Use of Color
• Reference: Contrast (Minimum)
• Reference: Contrast (Enhanced)
• Contrast ratio
• User interface component
• Large scale (text)
• Including a text cue for colored form control labels
• Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

Hey there,

when selecting any region of the hex color value, the whole value will be selected including the # symbol. Each selection attempt aiming for only parts of the hex value fails due to the selection being automatically expanded.

First of all, there are applications that require the prefixed version and applications that require an unprefixed version. Therefor I think it should be able to copy the text as usual. In my opinion the auto expansion of the selection area is a hindrance.

This becomes especially problematic when using tools like Blender that truncate the hex value to 6 characters. Copying a hex value with the hash symbol #ababab will result in #ababa being pasted. Since one is not able to copy only the hex value, it’s required to type the values by hand or copy them to a text field to manipulate. I understand that this would not be a problem if Blender would just remove the leading # on each paste attempt to the hex value field.

TL;DR: The auto-expansion of hex value selection is overly aggressive and makes things unnecessarily complicated in some cases.

Temporary Workaround: Disable JavaScript in dev tools.

Hi, I tried to use open-color with TypeScript, but something's wrong.
I have installed with yarn, and I just see that definition file has not installed.
As you know, there is a definition file on GitHub repository. I guess the definition file has not published because you have published on npm registry without running compile-templates.js. (not sure) So, I propose setting the prepublish hook for making sure generating compiled files. As follow:

{
  "scripts": {
    "test": "npm run test-typescript",
    "test-typescript": "tsc open-color.d.ts tests/typescript.ts --noEmit",
    "compile-templates": "node compile-templates.js",
    "prepublish": "npm run compile-templates"
  }
}

If you want, I can make a PR.

Thank you!

• Adobe library
• Photoshop
• Illustrator

This is version 1

I was hoping you could add a small color swatch next to the corresponding color on the ingredients page? I keep needing to go back to the swatches page to remember what the color looked like, a small swatch of the colors next to the color name would make easier to navigate. (i.e. Blue 1, Blue 2, etc... )

First of all, fantastic project. It's very difficult to pick shades of attractive hues that have an equal perceived brightness, yet you managed somehow. Extremely valuable.

I know you've commented on some color suggestions already, but I still like to make a plea for a small set of color additions.

Brown
I know you mentioned that you have no plans for it. Justification to perhaps reconsider is that brown is the only missing hue compared to the widely used Material Design colors. I much prefer the consistency of Open Color, and adding brown would make Open Color a feature complete rival in terms of hues, yet with better picked shades.

Cold, Neutral, Warm Gray
The current gray is not neutral, it's slightly cool (blue). I believe gray needs special attention as it is often used as a main UI background, and even the slightest hue change has a far reaching effect on the whole UI.

My suggestion would be to have a truly neutral gray ramp, a slightly cold one (like the current one), and a slightly warm one.

Whatever your answer, again, great work!

A JSON format would be convenient for JavaScript interfaces/visualizations. A file the D3 community frequently uses is colorbrewer.json which has a similar selection of palettes:

https://github.com/axismaps/colorbrewer/blob/master/export/colorbrewer.json

I don't have a time to create a PR.(To be honest, I don't know how to test these types.) But, there should be someone need this!

type Color = string

declare module 'open-color' {
  interface OpenColor {
    white: Color
    black: Color
    gray: Color[]
    red: Color[]
    pink: Color[]
    grape: Color[]
    violet: Color[]
    indigo: Color[]
    blue: Color[]
    cyan: Color[]
    teal: Color[]
    green: Color[]
    lime: Color[]
    yellow: Color[]
    orange: Color[]
  }
  const OpenColor: OpenColor
  export default OpenColor
}

First congratulations for the project, is awesome !!

Just for convenience, has intention to add the project as a bower package?

What does this mean?
"All the color is tested on deuteranopia and protanopia mode"

Here's what I'm seeing:

Add a question to set which CSS complier is desired: SASS as a default option, LESS as an additional one.

$ npm install open-color
Which compiler do you want to use?

1. SASS/SCSS (default)
2. LESS

Hey! @yeun 👋

Just a short note, the link: Downloads > Source Code is broken.

The text color is $oc-blue-5 and the border bottom is $oc-blue-3. In this image, the third color is greener than the fifth.

... could maybe be an idea?

Hey @yeun @makepanic,

I was just thinking an additional, very nice feature would be a live preview of the colors (html) with a copy functionality (user should be able to choose the format?).

Just like here: http://flatuicolors.com

For example I am currently using the colors as defaults for some web components. However, I am not loading the package into the components to keep it small. For this kind of workflow, or other design tools that do not have a palett to include, this would be very awesome addition to /docs.

Include LESS, CSS format

Hi there,

While trying to @import using Bower and Gulp I receive the following error:

@import 'open-color';

Error: It's not clear which file to import for '@import "open-color"'.
       Candidates:
         open-color.scss
         open-color.css
       Please delete or rename all but one of these files.

I think renaming the open.color.scss file to _open-color.scss should fix this. If you can't do this for whatever reason I understand maybe there is another way around it.

I hope you can help. Thanks!

Could you add and auto-generate an ICC profile with named colors? w3c/csswg-drafts#817

When viewing the documentation in Safari on a screen larger than 1600px wide, the layout breaks.

This seems to be caused by the .not( ) SCSS lines applying the styles to every element that doesn't match the rules (so almost every element on the page). Currently .not is only supported in Safari on macOS and iOS (CanIUse.com) so the layout doesn't break in other browsers (Chrome, etc.).

Hi, there! First of all, thanks so much for this awesome project. I've used it a few times already in personal and work projects. The scheme and extensibility is great!

Up until now I've only used the SCSS version of Open Color, but an upcoming project requires plain old CSS. Your current CSS version of Open Color leverages variables/custom properties which don't seem to be supported by all modern browsers yet (http://caniuse.com/#feat=css-variables).

Am I missing something in the doc/src? Do you have a specific way that you implement the CSS version across browsers (e.g. polyfill)?

Thanks again for the great work and the help in advance.

Supporting accent colors like in MD color palette would be cool

Craft is an amazing plugin suite for Sketch. It includes Library, which is a powerful plugin for saving and sharing styles, shapes, colors, etc.

It would be great to see Open Color ported to Craft Library and making the imports much easier with just a pull of the repo.

Compared to variant 5 of the other colours, Red 5 looks a bit washed out. I've used Red 6 for now, as it compliments the other variants 5's better at the moment.

Currently with Columns: 0 here there is no organization of the palette.

Assuming 0-9 for color variations, Columns: 10 would produce an organized palette.

This also relies on #40

This has no effect on Inkscape.

It also might make sense to rename this template to open-color.gpl.hbs to stay consistent with the other naming conventions. It's also used for several open source applications.

Is there a reason you chose not to include a .css in the package?

The current gray palette appears to land a little on the cool side of neutral. A “warm”, “neutral”, and “cool” gray palette would be useful for mixing with the various shades.

In the instructions Here gray 5 is recommended for text(with white background) which fails WCAG 2.0 color contrast test, hence making it inaccessible for anyone with low vision impairments and color deficiencies.

It will be very convenient to use if there is some css style generated directly including

background-color
color
border
fill
stroke

Hey guys! Thanks for this project!

I've been using Gravit Designer on Ubuntu because i'm without my mac and gravit has a another kind of palette that insn't in your project options. It's called .gvswatch.

Any plans for this extension?

Available colors, as of 29 September, are as following (sorted by alphabetical order):

blue
cyan
grape
gray
green
indigo
lime
orange
pink
red
teal
violet
yellow

I think that would be more helpful if we can find the list on README.

Script for change hex value in the list below.

• open-color.less
• open-color.scss
• open-color.css
• docs/_config.yml
• docs/_sass/_open-color.scss
• docs/download/open-color__._.*.aco
• docs/download/open-color__._.*.ase
• docs/download/open-color__._.*.sketchpalette

• teal-0
• indigo-1

Hey there!
I create a open-color Mac OS pallete using ColorTools,

It was automatically generated using the .ase file provided.

This may be useful for someone. 😃
Download open-color_1.4.0.clr

Hi.

For personal use, I created a latex scheme based on open-color.css. I can make a pull request if other are interested or it fits the purpose of the repo.

Pouya-moh@a0be41e

It would be nice if the sidebar on the left side followed when you scroll down, maybe even show a "back to top" at the bottom, since the length of the website varies depending on your aspect ratio.