[HN Gopher] Show HN: Sorted CSS Colors - Sort the named CSS colo...
___________________________________________________________________
Show HN: Sorted CSS Colors - Sort the named CSS colors in a nice
way
Author : knuptfad
Score : 380 points
Date : 2021-03-18 15:19 UTC (7 hours ago)
(HTM) web link (enes.in)
(TXT) w3m dump (enes.in)
| johnsonap wrote:
| Some of these seem a little off, for example CADETBLUE and CYAN
| being next to each other. could just be my eyes or my monitor
| though
| knuptfad wrote:
| Note that their hue and lightness values are almost same. The
| only difference is saturation and that seems to be why they are
| on the same row, differentiated only by the saturation axis.
| n3k5 wrote:
| > _their hue and lightness values are almost same_
|
| Yeah? Well ... you know, that's just, like, your opinion,
| man. More specifically, HSL's opinion. HSL is a fine colour
| space for _specifying_ CSS colours, but not so good for
| evaluating lightness.
|
| If I use HSLuv instead, which is supposed to be like HSL, but
| more human-perceptually uniform and sane (basically a neat
| compromise between CIE Luv/Lab and standard HSL), I get a
| lightness of 61.2 for cadetblue and 91.1 for cyan.
|
| My bog-standard image editor uses HSB (a.k.a. HSV) in the
| HSL-style mode of its colour picker (HSL isn't even an
| option); and if I measure cadetblue with that via the
| 'eyedropper' tool, I get a brightness of 63%, whereas cyan
| has 100%.
|
| Those are obviously way closer to the truth when you just,
| like, look at the colours -- it's totally plausible that cyan
| is about 50% brighter; " _lightness values are almost same_ "
| is not plausible.
|
| This discrepancy isn't a huge problem, because the main
| dimension by which this tool organises colours is hue, which
| HSL is OK at. Only the way in which colours with similar hue
| are laid out on the page is off. It would be nice to see a
| more appropriate colour space used for this purpose.
| knuptfad wrote:
| I was commenting based on the HSL values of the mentioned
| colors. At the time of creating this tool I really didn't
| care too much about using a more perception-aware color
| space. Doing it just based on HSL already seemed like a
| huge win. But I received similar feedback in the past, too.
| So thanks for pointing out. I'll maybe think about making
| it even better in this sense.
| jedimastert wrote:
| I didn't realize there are a WACKTON of named CSS colors. Weird
| Etheryte wrote:
| Interesting display how certain parts of the color space used for
| the web are clearly held in higher regard than others. Hue 135
| has only one color, while hue 36 has whopping thirteen.
| knoebber wrote:
| I love the simplicity of UI and the design! It would be fun to
| use this to replace some hex codes in my code with color names.
|
| Some thoughts:
|
| 1. In grayscale mode the slider doesn't appear to do anything
|
| 2. Have you considered adding a way to compare colors or find
| complimentary?
|
| 3. A simple search box that accepted any css color format would
| be useful
| knuptfad wrote:
| Thanks!
|
| My answers to your points:
|
| 1. True. Maybe I could make it also disabled to restrict
| interacting with it altogether.
|
| 2. I didn't design the tool as a more serious colorpicker or
| color scheme generator, so I wasn't thinking about adding more
| advanced features.
|
| 3. I thought about adding a search box that would accept many
| possible color values as input, but I feel like, adding
| anything will make the design more cluttered at this point. So,
| for me, adding stuff is more of a design challenge than a
| technical one.
| Waterluvian wrote:
| Is there any value to named css colours beyond convenience for
| development?
|
| I find that I use hex for properly designed colours and otherwise
| use like one of 15 named colours for devel placeholders.
|
| Turns out there's like... 100.
|
| Are they special? Or did someone just pick and give them names?
| Minor49er wrote:
| This is really cool. The whole experience is slick!
|
| One thing I noticed is that some colors appear brighter, but are
| further down on the Saturation scale. For example,
| mediumturquoise and turquoise are shown as being less saturated
| than cyan, though cyan doesn't mix in any gray. Are these sorted
| by the sums of their RGB values? I'm also not too well versed in
| color theory, so I could be missing or misunderstanding something
| too.
| knuptfad wrote:
| Thanks, I'm glad! :)
|
| I think there's a misunderstanding there. Mediumturquoise and
| turquoise are both located above cyan, which means they are
| brighter as the vertical axis is the lightness.
|
| Also, to answer your question, colors are sorted by their hue,
| saturation and lightness values. So, it's actually a 3D color
| visualizer, where one dimension (hue) is reduced into just a
| slider at the top, and the other two dimensions are represented
| in a 2D grid.
|
| Thanks for your comment!
| [deleted]
| Minor49er wrote:
| That makes sense. Thank you!
| mutatio wrote:
| Nice, similar to: https://encycolorpedia.com/html but probably
| more intuitive.
|
| Are you using CIE* colorspace to match?
| knuptfad wrote:
| Thanks. Colors are sorted just based on their hue, saturation
| and lightness.
| formerly_proven wrote:
| I had no idea there were this many named colors in CSS.
|
| Turns out there are 16 HTML colors (upped to a whoppin' 17 colors
| in HTML4/CSS2.1) and around 124 named colors which originally
| came in due to X11. Since then, several colors have been added
| through various standards updates for a total of around 147
| colors.
| mcv wrote:
| Some of these colour names make little sense. For example,
| 'chocolate' is surprisingly light. 'brown' is red.
| avianlyric wrote:
| Worth watching the Technology Connection video on the colour
| Brown [1]. It's a strange colour that only really exists when
| placed in the context of other colours, not something that
| can really be produced by a pure RGB light source, which
| explains why the CSS Brown colour looks red.
|
| [1]: https://www.youtube.com/watch?v=wh4aWZRtTwU
| dfox wrote:
| Most of the color names come from X11 rgb.txt which was not
| exactly "designed" to be anything and also many entries
| assume RGB color space of some particular Unix workstation
| which was decidedly non-sRGB (eg. using significantly
| different gamma curve).
| signal11 wrote:
| This is very cool, thank you!
|
| Interestingly the difference between some of these colours is (to
| my eyes / monitor) ... very little?
|
| E.g. chartreuse and lawngreen, palegreen and lightgreen,
| mediumturquoise and darkturquoise, etc.
| munificent wrote:
| Color perceptiveness varies surprising widely across people.
|
| I took a test a while back and discovered that I'm apparently
| the color equivalent of a super-taster. I have extremely fine
| color perception.
|
| In the examples you list, lawngreen looks darker, bluer and a
| little more saturated than chartreuse. Palegreen is much
| lighter than lightgreen and somewhat more saturated.
| Mediumturquoise is bluer, darker, and duller than
| darkturquoise's greenish tint.
|
| Note, of course, that your monitor and viewing environment will
| affect your perception too.
| jedberg wrote:
| Out of curiosity are you male? There are physical differences
| between men's and women's eyes where men's eyes are better at
| edge and motion detection and women's eyes are better at
| detecting the difference between blue and green.
|
| Or at least adults are, possibly because of the environment
| they grew up in (the science is still murky on that one).
| leephillips wrote:
| Some women are even tetrachromats, with four different color
| receptors (it's pretty rare).
| jedberg wrote:
| That's orthogonal though. Both men and women can be
| tetrachromats, it's just more common in women (but
| exceedingly rare in both populations).
| signal11 wrote:
| Yes; thanks for pointing that out, that's an important factor
| too, I guess.
| cjboco wrote:
| There's an attempt to name ALL the rgb web space colors...
| https://colornames.org/
| b0afc375b5 wrote:
| I wanted to add Violet Evergarden to one of the colors, but
| there are already 22 Violet Evergardens. Lol.
| netmare wrote:
| This is very nicely done, but I still prefer the simplicity of
| <http://davidbau.com/colors/>. Despite being only 2-dimentional,
| I find that layout strangely more intuitive. I think the author
| manually tweaked the color positions, so that may be the reason.
| reaperducer wrote:
| This one works on mobile. The one you linked to does not.
| netmare wrote:
| What do you mean? It's just a static HTML table and it looks
| fine on both my Android 11 phone with Opera and in Firefox's
| Responsive mode on the desktop. It may not be mobile-
| friendly, but that's not inherently bad, especially for
| something that's not meant to be used on a phone.
| legitster wrote:
| I love this! I am one of the rare people who use named colors all
| of the time, and this will definitely get a bookmark from me!
|
| Especially during prototyping/design, it's soooo much easier to
| keep your designs consistent with a named look-alike color, then
| switch over to brand colors with a find/replace.
|
| For personal projects, I almost exclusively use named colors.
| devtul wrote:
| Is there any website that generates a color pallet along an
| example like X color for bg and Y for font and so on?
|
| It is cool to get 5 matching colors but I'm a dope for design, so
| I have no idea how to work with that.
| meristem wrote:
| For speed's sake could a hover or tap bring out the hex code? I
| understand that was not the function of your site. It would be
| cool to just be able to quickly see/use the hex if one is
| searching for color combos.
| meristem wrote:
| You may be familiar with this type of request: file it under
| "SCOPE CREEP"
| knuptfad wrote:
| Interesting point. Maybe the user could toggle the animations
| on and off. But back then, I hadn't designed this tool with the
| idea of creating a standard-ish colorpicker in mind.
| thitcanh wrote:
| The site is literally about CSS color names for 256-bit colors,
| it's not a palette site with beautiful colors. This is a
| ridiculous feature request, but I can't say I'm not used to
| this.
| knuptfad wrote:
| The idea was to create a tool to sort the named CSS colors in a
| way that it shows related colors together. So, next time I can't
| decide between a few CSS colors, I can just check them here side
| by side.
|
| I've created this tool last summer, but I hadn't shared it here
| back then. It's a PWA that I made with pure JS.
| flanbiscuit wrote:
| I've needed this in my life so many times, thank you for
| creating this!
| owly wrote:
| This is really well done. Congratulations on making such a
| useful tool. Thanks for sharing!
| muli_d wrote:
| This is very cool, I love it. Thanks for sharing.
| sam1r wrote:
| Awesome! Could you possibly implement a double-click to
| clipboard copy option?
| knuptfad wrote:
| Thanks for the suggestion. Could be nice to have, but then
| there must be a visual feedback for the user. Issues/PRs are
| welcomed in the GH repo.
| sam1r wrote:
| Happy to make a PR or just do it quickly!
|
| Edit: here you go https://pastebin.com/5Kypr4kh
|
| Edit 2: I would, but I'm at work so personal GH is a no-go
| atm. I'll cycle back here EOD & make the PR if OP agrees w/
| proposal
| forgotmypw17 wrote:
| Thank you for creating and sharing. Very nice app.
| achairapart wrote:
| Very cool. Please add permalinks/history state, so we can share
| specific hue or colors. Thanks!
| uhtred wrote:
| Looks like it's on Github, you could submit a pull request to
| add those things :)
| regularjack wrote:
| I think giving feedback is a valid way to contribute, I
| certainly would welcome feedback if it were my project. Not
| all contributions must be code.
| hunter2_ wrote:
| Normally I'd say "the feature request should still be
| made on GitHub even if it's not code" except for the fact
| that this is a Show HN which seems just as valid of a
| receiving area.
| preommr wrote:
| It's always the smiley face that takes a comment from
| idiosyncratic but potentially earnest to condescending and
| passive-aggressive.
| thih9 wrote:
| Slightly off topic, I always thought named CSS colors are
| generally ignored (in favour of 'rgba' / '#hex').
|
| Are named CSS colors seeing any practical use?
| frosted-flakes wrote:
| Black and white are probably used quite a lot, for obvious
| reasons. I use the other colours a lot for quick prototyping or
| debugging (particularly red), but I generally fine-tune the
| colours to something else later.
| reaperducer wrote:
| I see them used a lot in SVGs. But I don't know if that's a
| technical issue, or programmer preference.
| flixic wrote:
| For some reason, #000 or #000000 doesn't always work, but
| 'black' does. Never spent much time figuring out why.
| sam1r wrote:
| Awesome! Could you possibly implement a double-click to clipboard
| copy option?
| 0xADADA wrote:
| i love this. you now have the honor of making it into my "Tools"
| bookmarks folder.
| throwaway888abc wrote:
| Super helpful, bookmarked, Thank You
| saalweachter wrote:
| Huh, I always thought chartreuse was a red-ish color.
| Antipode wrote:
| That's a fairly common misconception for some reason.
| saalweachter wrote:
| The Mandela effect strikes again.
| tobr wrote:
| Good reminder that in CSS, darkgray is a light gray and gray is a
| dark gray. Also presumably up is down and wet is dry.
| cialowicz wrote:
| 'Brown' is dark red, and to my eye 'sienna' has very little red
| in it. To get actual brown, you need 'saddlebrown'. CSS is
| super weird.
| avianlyric wrote:
| Worth watching the Technology Connection video on the colour
| Brown [1]. It's a strange colour that only really exists when
| placed in the context of other colours, not something that
| can really be produced by a pure RGB light source, which
| explains why the CSS Brown colour looks red.
|
| [1]: https://www.youtube.com/watch?v=wh4aWZRtTwU
| buzzerbetrayed wrote:
| I tried to find brown on the slider to see what you're
| talking about. Took me ages. Turns out you have to go REALLY
| red in order to find brown.
| runarberg wrote:
| Turns out brown is a really interesting color:
| https://www.youtube.com/watch?v=wh4aWZRtTwU
| SamBam wrote:
| "Sienna" is an extremely ambiguous color already. Image
| search for "sienna color" and you'll get a huge range of
| browns, reds and oranges.
|
| "Burn sienna" seems even more varied. Here's are four
| different color-oriented websites, with a dark earthy orange
| from Colorlex [1], a light salmon from Canva [2], a light
| brown from Benjamin Moore [3] and a dark brown from
| Atelieracrylic [4].
|
| 1. https://colourlex.com/project/burnt-sienna/ 2.
| https://www.canva.com/colors/color-meanings/burnt-sienna/ 3.
| https://www.benjaminmoore.com/en-us/color-overview/find-
| your... 4. http://atelieracrylic.com/atelier-
| interactive/burnt-sienna/
| cialowicz wrote:
| Fair enough, but the 'brown' issue is similarly confusing
| to the lightness reversal between 'gray' and 'darkgray'.
| SamBam wrote:
| Agree on the brown front, it's a very odd color choice.
| yreg wrote:
| Fiddle if anyone wants to see them:
| https://jsfiddle.net/yucsj7a2/1/
| achairapart wrote:
| But 'chucknorris'[0] is still my favorite red.
|
| [0]: https://stackoverflow.com/questions/8318911/why-does-html-
| th...
| synn wrote:
| That's fun. I've coded this useless tool based on your
| comment: "What's Your HTML Color ?"[0]
|
| [0]: https://onivers.com/color.html
| achairapart wrote:
| Ah! Maybe useless but cool nonetheless!
| smoe wrote:
| This just reminded me of the first bug of my career that took
| me hours trying to figure out. Colors weren't working correclty
| in IE 6 (pre IE Developer Tools) and I eventually learned that
| Firefox accepted both spellings "gray" and "grey", whereas IE
| only one of them.
|
| Don't remember which one I used, but do remember that I went
| home early that day after that :/
| mceachen wrote:
| Yup. There's a bunch like that.
|
| Know that CSS colors mostly came from X11:
| https://en.m.wikipedia.org/wiki/X11_color_names
|
| The CSS team shares some blame, though: they adopted them (and
| they really didn't need to: they could have just supported
| rgb/hsb/lab triplets).
| munificent wrote:
| CSS is just an embarrassment of mistakes:
| white-space: nowrap
|
| So they take a word "whitespace" which needs no hyphen and jam
| one in. Then they take two completely distinct words "no wrap"
| and jam them together with no separator. And then you have to
| remember both of these _on the same rule_.
| [deleted]
| Waterluvian wrote:
| I would be so lost if vscode didn't autocomplete css so well
| for me.
| IncRnd wrote:
| "Whitespace" in programming languages is a single word.
| "White space" in visual arts is composed of two separate
| words.
| joegahona wrote:
| "White space" is two words, not one.
| tobr wrote:
| As far as I can tell, both are common, but "white space" is
| more common as a synonym to negative space, and
| "whitespace" is more common to refer to the characters. If
| so, the "white-space" property controls whitespace, not
| white space.
| tshaddox wrote:
| In computing it is widely used as a single word
| "whitespace." For example:
|
| - The XML W3C Rec: https://www.w3.org/TR/xml/
|
| - The HTTP 1.0 RFC: https://tools.ietf.org/html/rfc1945
|
| However, there are exception. The Unicode character
| database has a property called "White_Space" which implies
| it is two words:
| http://www.unicode.org/reports/tr44/#White_Space
| nanis wrote:
| > a property called "White_Space" which implies it is two
| words
|
| <tongue-in-cheek> Except that `_` is a "word" character
| by default. </tongue-in-cheek>
| scubbo wrote:
| "White" and "space" are two words, and "Whitespace" is one
| word.
| runarberg wrote:
| This is at the top of the list in the _Incomplete List of
| Mistakes in the Design of CSS_ [1]. Which has been discussed
| several times on HN (last 2 months ago)[2].
|
| 1: https://wiki.csswg.org/ideas/mistakes
|
| 2: https://news.ycombinator.com/item?id=25891435
| tshaddox wrote:
| Also, the entire semantics are a bit strange. When I'm
| deciding whether I want text to line wrap, I don't really
| think about whether the _whitespace_ should wrap. Yes,
| whitespace is somewhat relevant to the topic, since that 's
| one option of _where_ to break lines in order to line wrap,
| but I still think of it as the entire text that is line
| wrapping.
|
| Oh, and don't forget that there is in fact a word-wrap
| property, which is a much better name for the previous
| behavior, but in fact only customizes how the line-breaking
| algorithm determines which words can be broken apart.
| ericwood wrote:
| Eh it's minor at best. I'll take it over "referer" any day.
| knuptfad wrote:
| -\\_(tsu)_/-
| achairapart wrote:
| Some background about why dark gray is lighter than gray, plus
| some other idiosyncrasies:
|
| https://en.wikipedia.org/wiki/X11_color_names#Clashes_betwee...
| samstave wrote:
| Thats pretty darn dope.
| liminal wrote:
| Who decided that 'lightpink' should be darker than 'pink'?
|
| Also, nice project :)
| nc wrote:
| Lovely - you should make url reflect the slider state for easy
| sharing.
| GrazeMor wrote:
| Colors appear different depending on what color they are next to
| so its not a great way to pick colors.
| crazygringo wrote:
| This is definitely a cool way of exploring CSS colors.
|
| But, serious question: does anyone actually _use_ CSS colors
| except for a handful of the basics ( "red", "blue") for
| prototyping/debugging?
|
| I mean, the idea of typing "background-color: lightsalmon;" just
| feels so bizarre to me.
|
| Whenever I've needed to come up with colors from scratch, I'll
| just start with an intuitive best guess -- e.g. "hsl(30, 80%,
| 50%)" -- and then iterate a couple times till I get what I'm
| looking for.
|
| It seems like even more effort to try to select colors from the
| CSS palette when it might turn out that there isn't even a
| satisfactory one. The CSS colors are still _extremely_ limited.
| E.g. the distance between neighbors like "dark cyan" and
| "darkslategray" is _huge_.
| munificent wrote:
| _> Whenever I 've needed to come up with colors from scratch,
| I'll just start with an intuitive best guess -- e.g. "hsl(30,
| 80%, 50%)"_
|
| That's what I do too, but I find it leads me to get stuck in a
| rut with certain color areas. Looking at this site was a good
| reminder to me to give named colors a try just because it will
| help me break out of my usual color habits.
| codazoda wrote:
| I prefer to use named colors in my own CSS layouts.
| "lightsalmon" is more descriptive to me than "#FFA07A" or
| "rgb(255, 160, 122)" or "hsl(17, 100%, 73.9%)" at a glance.
| Ashanmaril wrote:
| It's more descriptive, but usually you design UIs for the
| user, not for the developer writing the CSS
| lucideer wrote:
| > _" lightsalmon" is more descriptive to me than "#FFA07A" or
| "rgb(255, 160, 122)"_
|
| While I agree, I feel that learning to look at "#FFA07A" and
| immediately grok "pink" has been of general benefit to me as
| a frontend dev.
|
| > _or "hsl(17, 100%, 73.9%)" at a glance_
|
| I must admit though that I haven't mastered identifying hue
| by number just yet (though if I do, it will be even better as
| Saturation and Lightness/Luminosity are much easier to reason
| about).
| yyx wrote:
| A good IDE will show a color preview https://code.visualstudi
| o.com/assets/docs/languages/css/colo...
| reaperducer wrote:
| Awesome if you're in your office on your usual work
| computer. Not great if you're in the field trying to make
| quick fixes on whatever terminal a client provides.
| endless1234 wrote:
| In which reality do you need to monkey patch CSS color
| values on a terminal directly to production? With no
| possibility of running a IDE?
| [deleted]
| smoe wrote:
| When I started web dev in the early 2000s, I remember it being
| recommended to use the named colors because of them being more
| consistent accross different monitors. Not sure if this was
| true at all and/or only for the original 16 basic colors.
|
| Nonetheless, I kept using them for a while, because I think it
| makes the css easier to read, when having names (even
| suboptimal ones) over hex codes.
|
| But with the introduction of css preprocessors in the late
| 2000s that allow defining variables, I have not used them
| since.
| xmprt wrote:
| This might be a dumb question but how would named colors be
| more consistent across monitors? I thought they mapped to the
| same RGB value so there would be no difference between 'red'
| and #FF0000.
| smoe wrote:
| I remembered it wrongly. It wasn't about named colors, but
| "web-safe colors" that can be displayed by 256 color
| displays directly, without having to fallback to the
| closest color or by using dithering. Some of them happened
| to have a name attached to it. Don't know if the original
| 16 named colors are also all safe colors.
|
| https://en.wikipedia.org/wiki/Web_colors#Web-safe_colors
| qwertox wrote:
| In my case it was the convenience of directly adding the alpha
| channel value which made me move to `rgba()`
| jedberg wrote:
| Using the color names is more accessible.
|
| People with vision disabilities can have a custom plugin that
| changes the colors based on their name, instead of trying to
| convert all the hex codes.
| mpetroff wrote:
| This would be true if the CSS color names were actually
| reasonable, but many of them are not.
|
| One would be better off using the results [1] of Heer & Stone
| (2012) [2] (or a similar analysis) to assign names to sRGB
| colors. You end up with 33 unique names instead of more than
| 100, and the number of unique names can be reduced further by
| merging synonyms.
|
| [1] http://vis.stanford.edu/color-names/analyzer/ [2]
| https://doi.org/10.1145/2207676.2208547
| jedberg wrote:
| It doesn't matter what the names are, the point is you can
| have a plugin that changes one color to another based on
| their names and what you can see. The names are a much
| smaller search space than "all possible hex codes".
| mpetroff wrote:
| I'd argue that the 147 named CSS colors are still too
| many (but definitely better than the ~16.8 million sRGB
| colors). Regardless, since hex codes are used in
| practice, they would still need to be dealt with.
| crazygringo wrote:
| Are you saying such a plugin exists that only works with
| named colors?
|
| That would seem like a... usability disaster.
|
| Any accessibility tool for vision should operate at an OS
| level to map colors across everything. And even if you wanted
| a web-only tool, it would need to similarly operate across
| all colors -- whether hex codes or in images or SVG's. Very
| few sites use any named CSS colors at _all_ except for
| "white" or "black".
|
| There are lots of areas where it's important to keep
| accessibility in mind... but named CSS colors would not seem
| to be one of them.
| reaperducer wrote:
| _People with vision disabilities can have a custom plugin
| that changes the colors based on their name, instead of
| trying to convert all the hex codes._
|
| Does this exist, or is this hypothetical? If it exists, it's
| something I would add to my toolkit.
| jedberg wrote:
| I honestly don't know, it's just what I was told by someone
| who is visually impaired a long time ago. That it's easier
| if people use the names instead of the hex codes because
| then they can more easily convert that.
| SamBam wrote:
| As others say, this sounds unlikely and unwieldy. It also
| doesn't quite make sense. How would it help to change
| "lightyellow" to "yellow", say, without knowing the
| contrast of the other colors next to it? Are you trying
| to darken it or lighten it?
|
| It would make much more sense to do something check the
| lightness ratio between the foreground and background
| colors, and increase that ratio on the fly. Chrome can
| already tell you if the color ratio is too low to pass
| accessibility guidelines. There are a number of plugins
| that do this, like Color Enhancer [1] or High Contrast
| [2].
|
| 1. https://chrome.google.com/webstore/detail/color-
| enhancer/ipk...? 2.
| https://chrome.google.com/webstore/detail/high-
| contrast/djcf...
| blondin wrote:
| i believe it's not common to use css color names. i wish more
| colors were defined and people used them more though. it
| provides a very consistent color re-use.
|
| the best example i can think of is this fire demo on codepen,
| which i bookmarked because i really liked the color names:
| https://codepen.io/jscottsmith/pen/dwZjWK
| ancarda wrote:
| Sure. I use the colors peachpuff+red and green+lightgreen when
| I need to show a success or error/warning box. Like so:
| .notice { padding: 1em; border: 1px
| solid black; margin-bottom: 1em; }
| .notice.warning { background-color: peachpuff;
| border-color: red; } .notice.success {
| background-color: green; border-color: lightgreen;
| }
|
| I think the end-result is pretty nice.
| ericwood wrote:
| I've never used them or seen them used for large-scale
| production sites but I reach for them all the time when
| building out small proof of concept or isolated examples for
| debugging in places like Codepen. It's handy to have a few
| appealing colors memorized when you're sketching things out.
| forgotmypw17 wrote:
| Code is poetry when written as such,
|
| Words in stead of numbers add a nice touch
|
| Those who treat it as craft and an art
|
| May find that named colors are a good start.
| devmunchies wrote:
| *snap snap snap snap snap*
| whatshisface wrote:
| It still should be doubly stressed,
|
| that you could use something like LESS,
|
| to substitute code arbitrarily,
|
| for the readable name that's there really.
| LegitGandalf wrote:
| So whether your colors be blue
|
| Or red or lightsalmon or yew
|
| Remember that if life is rough
|
| Just add in a little more peachpuff!
| [deleted]
| parekhnish wrote:
| This is fun!
|
| The only "bug" I see, if at all, is that the hue value does not
| wrap around, i.e. the colors shown at 360 are not the same colors
| shown at 0.
| knuptfad wrote:
| Good point, thanks for pointing it out. I think I was trying to
| deal with it, but for some reason I just let it be this way.
| Also contributions are welcome! :)
| edwinyzh wrote:
| It's neat! Slightly offtopic - I saw one of the colors named
| "peru", does the name has any connection with Peru the country?
| uxamanda wrote:
| Not sure about that one, but dodgerblue is named after the LA
| Dodgers, so seems possible :-)
| https://en.wikipedia.org/wiki/Dodger_blue
| runarberg wrote:
| After doing some digging, I found out that Peru is also a named
| color in the X11 color system[1]. Peru in particular seems to
| come from _Peruvian Brown_ [2]. I don't know what is _peruvian_
| about this shade of brown. But hopefully this is enough to get
| you started.
|
| 1: https://en.wikipedia.org/wiki/X11_color_names
|
| 2: https://en.wikipedia.org/wiki/Shades_of_brown#Peru
| runarberg wrote:
| Interesting. Here is Peru on the CSSWG draft document[1]. Other
| then rebeccapurple[2][3] is there any rationale given for the
| names of the CSS colors?
|
| 1: https://drafts.csswg.org/css-color-3/#peru
|
| 2: https://en.wikipedia.org/wiki/Eric_A._Meyer#Personal_life
|
| 3: https://lists.w3.org/Archives/Public/www-
| style/2014Jun/0312....
| reaperducer wrote:
| "Goldenrod" looks like a field of goldenrods.
| knuptfad wrote:
| "chartreuse" name is coming from the chartreuse drink, which
| is a highly alcoholic and green colored booze :)
| wmil wrote:
| Yes, Peru used to export pottery with a distinct brown colour.
| Prior to cheap air travel travelling to Peru was rare but the
| pottery was common. So "Peru pottery brown" was just called
| "Peru" when talking about colours.
| arkitaip wrote:
| Ooh I really enjoyed this, it's a nice way to expand on your
| color name vocab. I wonder if there is an equivalent for Pantone?
| knuptfad wrote:
| Thanks, I'm happy to hear you enjoyed it.
|
| I'm not aware of an equivalent tool for Pantone colors. But it
| can be created using this very tool with a table of pantone
| colors instead of a table of named css colors that it uses now.
| reaperducer wrote:
| _I 'm not aware of an equivalent tool for Pantone colors_
|
| There is a tool, but I've only seen it in a dead tree
| edition.
| IncRnd wrote:
| It's kind of a shame that JS needs to be enabled for a CSS page
| to render. :(
|
| Usefull, though. Thank you for posting this.
___________________________________________________________________
(page generated 2021-03-18 23:00 UTC)