<\/span><\/h3>\nSimply move your mouse to the desired location on the screen. The software will automatically extract the pixel color under the mouse cursor and display it in the main window. <\/p>\n
Displayed Color Information:<\/strong><\/p>\n\n- RGB Values<\/strong>: Red, Green, Blue values, each in the range of 0-255<\/li>\n
- HEX Code<\/strong>: A hexadecimal code in #RRGGBB format, most commonly used in web development<\/li>\n
- HSV Values<\/strong>: Hue, Saturation, Value – useful for color adjustment<\/li>\n
- HSL Values<\/strong>: Hue, Saturation, Lightness – utilized in CSS<\/li>\n
- CMYK Values<\/strong>: Cyan, Magenta, Yellow, Key (Black) values used in printing<\/li>\n
- Color Name<\/strong>: Web standard color names (e.g., “SkyBlue”, “Tomato”, “LightGray”, etc.)<\/li>\n
- Color Preview<\/strong>: A rectangular box to visually confirm the actual color<\/li>\n<\/ul>\n
<\/span>Step 3: Copying Color Codes<\/span><\/h3>\nOnce you find the desired color, click the copy button next to its format.<\/p>\n
How to Copy:<\/strong><\/p>\n\n- Copy RGB Values: Click the \ud83d\udccb button to the right of the “Color Information” line<\/li>\n
- Copy HEX Code: Click the \ud83d\udccb button to the right of the “HEX” line<\/li>\n
- Copy HSV Values: Click the \ud83d\udccb button to the right of the “HSV” line<\/li>\n
- Copy HSL Values: Click the \ud83d\udccb button to the right of the “HSL” line<\/li>\n
- Copy CMYK Values: Click the \ud83d\udccb button to the right of the “CMYK” line<\/li>\n<\/ol>\n
Clicking the copy button will copy the color code to your clipboard, and a “Copy Complete” message will be displayed. You can now press Ctrl+V to paste it wherever you need. <\/p>\n
\n<\/span>Utilizing the Color History Feature<\/span><\/h2>\nThe Color History feature significantly enhances work efficiency. It is highly useful when comparing multiple colors or needing to reuse previously extracted colors. <\/p>\n
<\/span>Opening the Color History Window<\/span><\/h3>\nClick the “View Color History”<\/strong> button located to the right of the “Color Preview” section in the main window.<\/p>\n<\/span>Color History Window Layout<\/span><\/h3>\nWhen the Color History window opens, the 10 most recently extracted colors are displayed as tiles.<\/p>\n
Information for Each Color Tile:<\/strong><\/p>\n\n- Color Preview<\/strong>: The actual color is displayed at the top<\/li>\n
- HEX Code<\/strong>: Displayed in #RRGGBB format in the center<\/li>\n
- RGB Values<\/strong>: R, G, B values are displayed at the bottom<\/li>\n<\/ul>\n
<\/span>Using Color Tiles<\/span><\/h3>\n\n- Mouse Over<\/strong>: Hovering over a color tile displays detailed information as a tooltip\n
\n- Color Name<\/li>\n
- HEX Code<\/li>\n
- RGB Values<\/li>\n
- HSV Values<\/li>\n
- HSL Values<\/li>\n<\/ul>\n<\/li>\n
- Click to Copy<\/strong>: Clicking a desired color tile automatically copies its HEX code to the clipboard<\/li>\n<\/ul>\n
<\/span>Managing Color History<\/span><\/h3>\n\n- The software automatically saves the 10 most recently extracted colors.<\/li>\n
- Duplicate colors (if RGB values are identical) are automatically removed, keeping only the most recent entry.<\/li>\n
- The most recently extracted color is displayed at the front.<\/li>\n
- From the 11th color onwards, the oldest colors are automatically deleted.<\/li>\n<\/ul>\n
\n<\/span>Usage Guide by Color Format<\/span><\/h2>\n<\/span>RGB (Red, Green, Blue)<\/span><\/h3>\nFormat<\/strong>: R: 0-255, G: 0-255, B: 0-255<\/p>\nApplications:<\/strong><\/p>\n\n- Graphic software (Photoshop, Illustrator)<\/li>\n
- Color specification in programming languages<\/li>\n
- Digital image editing<\/li>\n<\/ul>\n
Example<\/strong>: R: 135, G: 206, B: 235<\/p>\n<\/span>HEX (Hexadecimal)<\/span><\/h3>\nFormat<\/strong>: #RRGGBB<\/p>\nApplications:<\/strong><\/p>\n\n- Web development (HTML, CSS)<\/li>\n
- Web design<\/li>\n
- Most commonly used color code<\/li>\n<\/ul>\n
Example<\/strong>: #87CEEB<\/p>\n<\/span>HSV (Hue, Saturation, Value)<\/span><\/h3>\nFormat<\/strong>: H: 0-360\u00b0, S: 0-100%, V: 0-100%<\/p>\nApplications:<\/strong><\/p>\n\n- Color adjustment and correction<\/li>\n
- Computer vision<\/li>\n
- Image processing algorithms<\/li>\n<\/ul>\n
Example<\/strong>: H: 197\u00b0, S: 43%, V: 92%<\/p>\n<\/span>HSL (Hue, Saturation, Lightness)<\/span><\/h3>\nFormat<\/strong>: H: 0-360\u00b0, S: 0-100%, L: 0-100%<\/p>\nApplications:<\/strong><\/p>\n\n- CSS3 color specification<\/li>\n
- Adjusting color brightness<\/li>\n
- Responsive web design<\/li>\n<\/ul>\n
Example<\/strong>: hsl(197, 71%, 73%)<\/p>\n<\/span>CMYK (Cyan, Magenta, Yellow, Key)<\/span><\/h3>\nFormat<\/strong>: C: 0-100%, M: 0-100%, Y: 0-100%, K: 0-100%<\/p>\nApplications:<\/strong><\/p>\n\n- Print design<\/li>\n
- Publishing work<\/li>\n
- Offset printing<\/li>\n<\/ul>\n
Example<\/strong>: C: 43%, M: 12%, Y: 0%, K: 8%<\/p>\n
\n<\/span>Practical Application Scenarios<\/span><\/h2>\n<\/span>Usage for Web Designers<\/span><\/h3>\n\n- Open a reference site and position your mouse over a desired color.<\/li>\n
- Click the HEX code copy button to get the color code.<\/li>\n
- Paste it directly into your CSS file.<\/li>\n
- If you’ve extracted multiple colors, compare them all at once in the color history.<\/li>\n<\/ol>\n
<\/span>Usage for UI\/UX Designers<\/span><\/h3>\n\n- Extract colors from competitor apps or reference designs.<\/li>\n
- Copy RGB or HEX values and apply them to Figma or Sketch.<\/li>\n
- Use color history to build color palettes.<\/li>\n
- Refer to HSL values to create color variations.<\/li>\n<\/ol>\n
<\/span>Usage for Graphic Designers<\/span><\/h3>\n\n- Extract desired colors from images or designs displayed on the screen.<\/li>\n
- Copy RGB values and input them into Photoshop or Illustrator.<\/li>\n
- When working on print materials, check and utilize CMYK values.<\/li>\n
- Extract multiple colors to plan harmonious color schemes.<\/li>\n<\/ol>\n
<\/span>Usage for Developers<\/span><\/h3>\n\n- Extract accurate color codes from design mockups.<\/li>\n
- Use HEX or RGB values directly in your code.<\/li>\n
- Use color history to build theme color sets.<\/li>\n
- Define them as CSS variables or constants for reuse.<\/li>\n<\/ol>\n
\n