Skip to content

Team-Harmony-Dev/LiveColor_Website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

About

--- Looking for a convenient color-picking experience on the go? Look no further than LiveColor. All it takes to get started is simply uploading a photo from your mobile device’s camera roll. From there you’ll be able to save colors directly from your own photos! Save your favorite colors, design your own palettes, generate complex harmonies, and even edit colors all within LiveColor.

Features

---

Color Picking

Begin by clicking the Add Image button. Then either take a photo with your device or upload a photo from your photo gallery.

After selecting the desired color by tapping the image, press the Save Color button to save the color.

Then click the Saved Colors icon on the bottom bar in order to see all the colors you have saved.

1 2 3
---

Color Info & Editing

To view the color info for the currently selected color, click on the Info icon in the color description. To see color info for colors you have already saved, go to your Saved Colors.

Once in your Saved Colors simply tap on a color to view its Color Info.

From here you can view and edit your colors in HEX, RGB, and HSV. To edit a color, tap the pencil icon in the top right.

Modify your color in RGB or HSV with live comparison to the original color.

1 2 3 4
---

Generating Harmonies

Navigate to the Color Info of your desired color. Once there tap the
"VIEW COLOR HARMONIES" button on the bottom.

Scroll through our many automatically generated harmonies. If you find one you like, simply tap on it to display all the colors in the harmony.

From here, you can look at the info for any of the colors in the palette as you would for any other color! If you like the palette and want to save it, you can hit the save button in the top right corner and set a name for your new palette.

1 2 3
---

Color of the Day

Discover and appreciate a different color every day with our Color of The Day feature! You might even get a special color for certain holidays!

---

Customization & Settings

To access Settings for the LiveColor app click the cog icon on the bottom right.

Tweak any of our app settings to match your preferences. Check out the "Appearance" settings page to try out Dark Mode.

From here Enable or Disable Dark Mode for the app. Type or paste in a hex value for the accent color for the current mode: Dark or Light.

1 2 3
---

About Us

Meet the Team!

<script> //these 3 functions switch between the 3 tutorial images for Color Picking (C.P.) function onStep1CP() { var x = document.getElementsByClassName("activeCP"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCP"); } document.getElementById("link1CP").classList.add("activeCP"); // document.getElementById("img1CP").style.display = "block"; document.getElementById("img2CP").style.display = "none"; document.getElementById("img3CP").style.display = "none"; //Displays the correct instruction message document.getElementById("instruction1CP").style.display = "block"; document.getElementById("instruction2CP").style.display = "none"; document.getElementById("instruction3CP").style.display = "none"; } function onStep2CP() { var x = document.getElementsByClassName("activeCP"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCP"); } document.getElementById("link2CP").classList.add("activeCP"); // document.getElementById("img1CP").style.display = "none"; document.getElementById("img2CP").style.display = "block"; document.getElementById("img3CP").style.display = "none"; //Displays the correct instruction message document.getElementById("instruction1CP").style.display = "none"; document.getElementById("instruction2CP").style.display = "block"; document.getElementById("instruction3CP").style.display = "none"; } function onStep3CP() { var x = document.getElementsByClassName("activeCP"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCP"); } document.getElementById("link3CP").classList.add("activeCP"); // document.getElementById("img1CP").style.display = "none"; document.getElementById("img2CP").style.display = "none"; document.getElementById("img3CP").style.display = "block"; //Displays the correct instruction message document.getElementById("instruction1CP").style.display = "none"; document.getElementById("instruction2CP").style.display = "none"; document.getElementById("instruction3CP").style.display = "block"; } //these 4 functions switch between the 4 tutorial images for Color Info (C.I.) function onStep1CI() { var x = document.getElementsByClassName("activeCI"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCI"); } document.getElementById("link1CI").classList.add("activeCI"); // document.getElementById("img1CI").style.display = "block"; document.getElementById("img2CI").style.display = "none"; document.getElementById("img3CI").style.display = "none"; document.getElementById("img4CI").style.display = "none"; //Displays the correct instruction message document.getElementById("instruction1CI").style.display = "block"; document.getElementById("instruction2CI").style.display = "none"; document.getElementById("instruction3CI").style.display = "none"; document.getElementById("instruction4CI").style.display = "none"; } function onStep2CI() { var x = document.getElementsByClassName("activeCI"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCI"); } document.getElementById("link2CI").classList.add("activeCI"); // document.getElementById("img1CI").style.display = "none"; document.getElementById("img2CI").style.display = "block"; document.getElementById("img3CI").style.display = "none"; document.getElementById("img4CI").style.display = "none"; //Displays the correct instruction message document.getElementById("instruction1CI").style.display = "none"; document.getElementById("instruction2CI").style.display = "block"; document.getElementById("instruction3CI").style.display = "none"; document.getElementById("instruction4CI").style.display = "none"; } function onStep3CI() { var x = document.getElementsByClassName("activeCI"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCI"); } document.getElementById("link3CI").classList.add("activeCI"); // document.getElementById("img1CI").style.display = "none"; document.getElementById("img2CI").style.display = "none"; document.getElementById("img3CI").style.display = "block"; document.getElementById("img4CI").style.display = "none"; //Displays the correct instruction message document.getElementById("instruction1CI").style.display = "none"; document.getElementById("instruction2CI").style.display = "none"; document.getElementById("instruction3CI").style.display = "block"; document.getElementById("instruction4CI").style.display = "none"; } function onStep4CI() { var x = document.getElementsByClassName("activeCI"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCI"); } document.getElementById("link4CI").classList.add("activeCI"); // document.getElementById("img1CI").style.display = "none"; document.getElementById("img2CI").style.display = "none"; document.getElementById("img3CI").style.display = "none"; document.getElementById("img4CI").style.display = "block"; //Displays the correct instruction message document.getElementById("instruction1CI").style.display = "none"; document.getElementById("instruction2CI").style.display = "none"; document.getElementById("instruction3CI").style.display = "none"; document.getElementById("instruction4CI").style.display = "block"; } //these 3 functions switch between the 3 tutorial images for Color Harmonies (C.H.) function onStep1CH() { var x = document.getElementsByClassName("activeCH"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCH"); } document.getElementById("link1CH").classList.add("activeCH"); // document.getElementById("img1CH").style.display = "block"; document.getElementById("img2CH").style.display = "none"; document.getElementById("img3CH").style.display = "none"; //Displays the correct instruction message document.getElementById("instruction1CH").style.display = "block"; document.getElementById("instruction2CH").style.display = "none"; document.getElementById("instruction3CH").style.display = "none"; } function onStep2CH() { var x = document.getElementsByClassName("activeCH"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCH"); } document.getElementById("link2CH").classList.add("activeCH"); // document.getElementById("img1CH").style.display = "none"; document.getElementById("img2CH").style.display = "block"; document.getElementById("img3CH").style.display = "none"; //Displays the correct instruction message document.getElementById("instruction1CH").style.display = "none"; document.getElementById("instruction2CH").style.display = "block"; document.getElementById("instruction3CH").style.display = "none"; } function onStep3CH() { var x = document.getElementsByClassName("activeCH"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCH"); } document.getElementById("link3CH").classList.add("activeCH"); // document.getElementById("img1CH").style.display = "none"; document.getElementById("img2CH").style.display = "none"; document.getElementById("img3CH").style.display = "block"; //Displays the correct instruction message document.getElementById("instruction1CH").style.display = "none"; document.getElementById("instruction2CH").style.display = "none"; document.getElementById("instruction3CH").style.display = "block"; } //these 3 functions switch between the 3 tutorial images for Customization and Settings. (C.S.) function onStep1CS() { var x = document.getElementsByClassName("activeCS"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCS"); } document.getElementById("link1CS").classList.add("activeCS"); // document.getElementById("img1CS").style.display = "block"; document.getElementById("img2CS").style.display = "none"; document.getElementById("img3CS").style.display = "none"; //Displays the correct instruction message document.getElementById("instruction1CS").style.display = "block"; document.getElementById("instruction2CS").style.display = "none"; document.getElementById("instruction3CS").style.display = "none"; } function onStep2CS() { var x = document.getElementsByClassName("activeCS"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCS"); } document.getElementById("link2CS").classList.add("activeCS"); // document.getElementById("img1CS").style.display = "none"; document.getElementById("img2CS").style.display = "block"; document.getElementById("img3CS").style.display = "none"; //Displays the correct instruction message document.getElementById("instruction1CS").style.display = "none"; document.getElementById("instruction2CS").style.display = "block"; document.getElementById("instruction3CS").style.display = "none"; } function onStep3CS() { var x = document.getElementsByClassName("activeCS"); var i; for (i = 0; i < x.length; i++) { x[i].classList.remove("activeCS"); } document.getElementById("link3CS").classList.add("activeCS"); // document.getElementById("img1CS").style.display = "none"; document.getElementById("img2CS").style.display = "none"; document.getElementById("img3CS").style.display = "block"; //Displays the correct instruction message document.getElementById("instruction1CS").style.display = "none"; document.getElementById("instruction2CS").style.display = "none"; document.getElementById("instruction3CS").style.display = "block"; } </script>

About

The GitHub Page's site for LiveColor.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published