masakudamatsu / color-picker Goto Github PK

Read https://tom.preston-werner.com/2010/08/23/readme-driven-development.html

To obtain the hue value in HSLuv

hsl to rgb
luminance to rgb in grey scale

See how https://www.w3schools.com/colors/colors_converter.asp works

Why?

• HSLuv.js can deal with hex and rgb only

For the time being, copycat the caniuse.com.

Use either

• vercel.app
• heroku.com
  recommended by CodeCademy.

See https://www.evernote.com/l/AFOtgadxEEJBr4LndvsznouTCvEfYLySFPI

See this CSS-Tricks article for JavaScript code to convert RGB values into HSL values.

Find a way to render both RGB and HSL values within (or beneath) the color swashes.

Show color name and swash.
User can select one by click/tap

For each hue, three versions

• In hexagon divided into 3 triangles?

Red 350, 0, 10
Orange/brown 20, 30, 40
Yellow 60
Yellow-green 90
Green 120
Green-cyan 150
Cyan / Aqua / Teal 180
Blue-cyan 210
Blue 240
Indigo(?) 270
Violet / Purple / Magenta 300
Shocking pink 320, 330, 340

Each swash is bordered with black/white if user selected luminance is lighter/darker than mid-grey.

Background is the user selected luminance in grayscale.

See my Evernote note: HTML forms 207: Range Input (Slider).

It's more illustrative if we change the luminance level continuously, rather than entering a value in a discrete fashion.

Set the red luminance level 0.9.

• This is an attribute value for Swash component

Then calculate the RGB values for a given luminance level that the user enters.

• LuminanceSetter component executes the setLuminance() method in App.js with the user-entered value as its argument.
• App.js then updates the luminance level as its state, and pass it to the Swash component.
• Swash component calls the generateColor() function from ColorGenerator.js, to calculate the RGB values as an object.

Use this RGB value to render a swash of red shades.

• Swash component updates the text and the background-color property based on the calculated RGB value.
• If there's no corresponding color for a given luminance level, set background-color: transparent with no text.

The backspace key won't delete the entered number if there only remains one digit.

luminance (1 to 21)
hex
rgb
hsl

Either text field

• User can copy-and-paste the color code
  Or number boxes
• User doesn’t need to type “hsl” or “,” or “#”

To feedback the user action consequence.

Make the entire page background rendered in user’s choice.

• Text color will be switched to black/whiteif luminance is higher/lower than the mid-grey (4.58 luminance)

For each hue (red, yellow, green, cyan, blue, purple):

• In ColorGenerator.js, create a function that produces RGB values from the luminance level
• In Swash component, use the conditional flow to switch the ColorGenerator method to obtain RGB values
• In App.js, add the Swash component instances with each hue's luminance as an attribute.

To render color swashes with color code values

Background color is black/white if the user selected luminance is brighter/darker than mid-grey.

• This ensures 4.5:1 contrast ratio

See https://www.npmjs.com/package/hsluv

Pick luminance value for user input 1
Pick hue values for user input 2
Get HSLuv values for the range of saturation
3 (hue) x 20 (saturation)

https://www.codecademy.com/paths/create-a-back-end-app-with-javascript/tracks/back-end-development-capstones/modules/bapi-capstones-solution-code-and-next-steps/informationals/back-end-web-development-next-steps

• SQLite is a very quick and easy way to set up a database, but because the database lives in a single file, it is not always supported in cloud hosting.
• There are many other database types such as PostgreSQL (https://www.postgresql.org/) and MySQL (https://www.mysql.com/) which have Node.js clients and can be used in deployed applications.
• These are just different dialects of SQL, and the syntax of PostgreSQL and MySQL is extremely similar to what you already know.

Use hsluv.js as rgb values as inputs

Keywords

• Three (color code values. Hue variations for each color name, number of primary colors)
• Light (luminance comes from the amount of light)

Use this CodePen as a template.

To follow up Issue #10

See

• https://css-tricks.com/sliding-nightmare-understanding-range-input/ (2017)
• range.css by Daniel Stern
  • https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/