Giter Site home page Giter Site logo

200palette's Introduction

200 Palette

When colors are your Game!

:bowtie: Done by: Walid, Mahmoud , Hana, Ahmed :bowtie:


> 200 Palette: Simple website that allows the user to paint a picture by enter the color name then display ten colors shades, also it's responsive and easy to use.

RGB? HSL? What is it?!

The RGB color model is an additive color model in which red, green and blue light are added together in various ways to reproduce a broad array of colors. HSL stands for hue, saturation, and lightness.

So to get our 8 color gradients, we edit the lightness value between 0-100%, so we get the selected color from the user then we make some calculations on it in order to get the gradients.

 The R,G,B values are divided by 255 to change the range from 0..255 to 0..1:
R' = R/255
G' = G/255
B' = B/255
Cmax = max(R', G', B')
Cmin = min(R', G', B')
Δ = Cmax - Cmin

and then we edit the lightness by this equation:

 L = (Cmax + Cmin) / 2

rgbHsl

So what's about SVG?

Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Progress:

  1. Search for idea: All team members

  2. develop the backend functions: Walid and Hana

  3. develop the DOM Function: Walid and Mahmoud

  4. design the website: Ahmed and Walid

How to use?

Enter the link here

or clone this repo

then install the npm by

npm install

to run the project:

node src/server.js

we have two test files, one for the backend suggestions and the other for the calculations

node src/test.js
node public/test.js

THANKS! ❤️

200palette's People

Contributors

aajour avatar hanatj avatar jabloun avatar mahmne avatar walidmash avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

hanatj aajour mahmne

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.