yeun / open-color Goto Github PK
View Code? Open in Web Editor NEWColor scheme for UI design.
Home Page: https://yeun.github.io/open-color/
License: MIT License
Color scheme for UI design.
Home Page: https://yeun.github.io/open-color/
License: MIT License
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.
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.
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!
Supporting accent colors like in MD color palette would be cool
It will be very convenient to use if there is some css style generated directly including
background-color
color
border
fill
stroke
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.
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?
Is there a reason you chose not to include a .css in the package?
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
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.
Script for change hex value in the list below.
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.
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
.
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.
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.
I think it would be useful :) - although it's only in Korean now, maybe you can add an English version later.
... could maybe be an idea?
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 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!
Could you add and auto-generate an ICC profile with named colors? w3c/csswg-drafts#817
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... )
Include LESS, CSS format
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?
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!
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
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.
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
.
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.
First congratulations for the project, is awesome !!
Just for convenience, has intention to add the project as a bower package?
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.