14 |

23 |

30 |

37 |

46 |

47 | ); 48 | }; 49 | 50 | export default HeaderIcon; 51 | -------------------------------------------------------------------------------- /src/contexts/history-context.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useCallback, useContext, useMemo } from 'react'; 2 | import useLocalStorageState from 'use-local-storage-state'; 3 | import type { ColorInfo } from 'utils/color'; 4 | 5 | interface HistoryContextValue { 6 | recentColors: ColorInfo[]; 7 | updateRecentColors: (newColor: ColorInfo) => void; 8 | } 9 | 10 | const HistoryContext = createContext({ 11 | recentColors: [], 12 | updateRecentColors: () => {}, 13 | }); 14 | 15 | interface HistoryProviderProps { 16 | children: React.ReactNode; 17 | } 18 | 19 | export const HistoryProvider = ({ children }: HistoryProviderProps) => { 20 | const [recentColors, setRecentColors] = useLocalStorageState( 21 | 'recentColors', 22 | { 23 | defaultValue: [], 24 | }, 25 | ); 26 | 27 | const updateRecentColors = useCallback( 28 | (newColor: ColorInfo) => { 29 | setRecentColors((prevRecentColors) => [ 30 | newColor, 31 | ...prevRecentColors.slice(0, 99), 32 | ]); 33 | }, 34 | [setRecentColors], 35 | ); 36 | 37 | const contextValue = useMemo( 38 | () => ({ recentColors, updateRecentColors }), 39 | [recentColors, updateRecentColors], 40 | ); 41 | 42 | return ( 43 | 44 | {children} 45 | 46 | ); 47 | }; 48 | 49 | export const useHistory = () => useContext(HistoryContext); 50 | 51 | export default HistoryContext; 52 | -------------------------------------------------------------------------------- /src/contexts/sidebar-context.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | createContext, 3 | useState, 4 | useContext, 5 | useMemo, 6 | useCallback, 7 | } from 'react'; 8 | 9 | interface SidebarContextValue { 10 | isMenuOpen: boolean; 11 | closeMenu: () => void; 12 | openMenu: () => void; 13 | toggleMenu: () => void; 14 | } 15 | 16 | const SidebarContext = createContext({ 17 | isMenuOpen: false, 18 | closeMenu: () => {}, 19 | openMenu: () => {}, 20 | toggleMenu: () => {}, 21 | }); 22 | 23 | interface SidebarProviderProps { 24 | children: React.ReactNode; 25 | } 26 | 27 | export const SidebarProvider = ({ children }: SidebarProviderProps) => { 28 | const [isMenuOpen, setIsMenuOpen] = useState(false); 29 | 30 | const toggleMenu = useCallback(() => { 31 | setIsMenuOpen(!isMenuOpen); 32 | }, [isMenuOpen]); 33 | 34 | const openMenu = useCallback(() => { 35 | setIsMenuOpen(true); 36 | }, []); 37 | 38 | const closeMenu = useCallback(() => { 39 | setIsMenuOpen(false); 40 | }, []); 41 | 42 | const contextValue = useMemo( 43 | (): SidebarContextValue => ({ 44 | isMenuOpen, 45 | toggleMenu, 46 | openMenu, 47 | closeMenu, 48 | }), 49 | [isMenuOpen, toggleMenu, openMenu, closeMenu], 50 | ); 51 | 52 | return ( 53 | 54 | {children} 55 | 56 | ); 57 | }; 58 | 59 | export const useSidebar = () => useContext(SidebarContext); 60 | 61 | export default SidebarContext; 62 | -------------------------------------------------------------------------------- /src/components/body-content/body-content.tsx: -------------------------------------------------------------------------------- 1 | import ColorSquare from 'components/color-square'; 2 | import ColorInput from 'components/color-input'; 3 | import { useSplitView } from 'contexts/split-view-context'; 4 | import './body-content.scss'; 5 | import type { ColorInfo } from 'utils/color'; 6 | import type { BodyNumber } from 'types/app'; 7 | 8 | interface BodyContentProps { 9 | handleSubmit: (bodyNum: BodyNumber, inputValue: string) => void; 10 | bodyNum: BodyNumber; 11 | colorData: ColorInfo; 12 | } 13 | 14 | const BodyContent = ({ 15 | handleSubmit, 16 | bodyNum, 17 | colorData, 18 | }: BodyContentProps) => { 19 | const { splitView, splitViewDisabled } = useSplitView(); 20 | 21 | return ( 22 |

26 |

31 |

32 | 38 |

39 | {colorData.name} 40 |

41 |

42 |

43 | {colorData.shades.map((color, index) => ( 44 | 50 | ))} 51 |

52 |

53 |

54 | ); 55 | }; 56 | 57 | export default BodyContent; 58 | -------------------------------------------------------------------------------- /src/components/color-input/color-input.tsx: -------------------------------------------------------------------------------- 1 | import { useInput } from 'contexts/input-context'; 2 | import type { BodyNumber } from 'types/app'; 3 | 4 | interface ColorInputProps { 5 | bodyNum: BodyNumber; 6 | handleSubmit: (bodyNum: BodyNumber, inputValue: string) => void; 7 | contrast: string; 8 | oppositeContrast: string; 9 | } 10 | 11 | const ColorInput = ({ 12 | bodyNum, 13 | handleSubmit, 14 | contrast, 15 | oppositeContrast, 16 | }: ColorInputProps) => { 17 | const inputContext = useInput(); 18 | 19 | const inputValue = 20 | bodyNum === 1 ? inputContext.inputValue1 : inputContext.inputValue2; 21 | const { updateInputValue } = inputContext; 22 | 23 | const handleKeyDown = (e: React.KeyboardEvent) => { 24 | if (e.key === 'Enter' && document.activeElement?.id !== 'color-search') { 25 | handleSubmit(bodyNum, inputValue); 26 | } 27 | }; 28 | 29 | return ( 30 |

31 | 32 | Color code input {bodyNum} 33 | 34 | { 40 | updateInputValue(bodyNum, e.target.value); 41 | }} 42 | onKeyDown={handleKeyDown} 43 | value={inputValue} 44 | style={{ borderColor: contrast }} 45 | /> 46 | 58 |

59 | ); 60 | }; 61 | 62 | export default ColorInput; 63 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "shade-generator", 4 | "version": "0.1.0", 5 | "license": "MIT", 6 | "type": "module", 7 | "scripts": { 8 | "build": "tsc -b && vite build", 9 | "dev": "vite", 10 | "lint": "eslint .", 11 | "preview": "vite preview" 12 | }, 13 | "dependencies": { 14 | "@fontsource/nunito": "^5.2.6", 15 | "@tippyjs/react": "^4.2.6", 16 | "clipboard-polyfill": "^4.1.1", 17 | "color": "^5.0.0", 18 | "color-name-list": "^11.24.0", 19 | "firebase": "^11.10.0", 20 | "nearest-color": "^0.4.4", 21 | "parse-color": "^1.0.0", 22 | "react": "^19.1.0", 23 | "react-dom": "^19.1.0", 24 | "react-ga4": "^2.1.0", 25 | "react-icons": "^5.5.0", 26 | "sass": "^1.89.2", 27 | "tippy.js": "^6.3.7", 28 | "use-local-storage-state": "^19.5.0" 29 | }, 30 | "devDependencies": { 31 | "@eslint/compat": "^1.3.1", 32 | "@eslint/js": "^9.31.0", 33 | "@stylistic/eslint-plugin": "^3.1.0", 34 | "@types/nearest-color": "^0.4.1", 35 | "@types/parse-color": "^1.0.3", 36 | "@types/react": "^19.1.8", 37 | "@types/react-dom": "^19.1.6", 38 | "@vitejs/plugin-react": "^4.6.0", 39 | "eslint": "^9.31.0", 40 | "eslint-config-airbnb-extended": "^2.1.2", 41 | "eslint-config-prettier": "^10.1.5", 42 | "eslint-import-resolver-typescript": "^4.4.4", 43 | "eslint-plugin-import-x": "^4.16.1", 44 | "eslint-plugin-jsx-a11y": "^6.10.2", 45 | "eslint-plugin-prettier": "^5.5.1", 46 | "eslint-plugin-react": "^7.37.5", 47 | "eslint-plugin-react-hooks": "^5.2.0", 48 | "eslint-plugin-react-refresh": "^0.4.20", 49 | "eslint-plugin-unicorn": "^59.0.1", 50 | "firebase-tools": "^14.10.1", 51 | "globals": "^16.3.0", 52 | "prettier": "^3.6.2", 53 | "typescript": "~5.8.3", 54 | "typescript-eslint": "^8.37.0", 55 | "vite": "^7.0.4", 56 | "vite-tsconfig-paths": "^5.1.4" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/contexts/split-view-context.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | createContext, 3 | useState, 4 | useCallback, 5 | useEffect, 6 | useContext, 7 | useMemo, 8 | } from 'react'; 9 | 10 | interface SplitViewContextValue { 11 | splitView: boolean | null; 12 | splitViewDisabled: boolean; 13 | setSplitView: (newSplitView: boolean) => void; 14 | toggleSplitView: () => void; 15 | } 16 | 17 | const SplitViewContext = createContext({ 18 | splitView: false, 19 | splitViewDisabled: false, 20 | setSplitView: () => {}, 21 | toggleSplitView: () => {}, 22 | }); 23 | 24 | const isSplitViewDisabled = () => window.innerWidth <= 600; 25 | 26 | interface SplitViewProviderProps { 27 | children: React.ReactNode; 28 | } 29 | 30 | export const SplitViewProvider = ({ children }: SplitViewProviderProps) => { 31 | const [splitView, setSplitView] = useState(null); 32 | const [splitViewDisabled, setSplitViewDisabled] = useState( 33 | isSplitViewDisabled(), 34 | ); 35 | 36 | const toggleSplitView = useCallback(() => { 37 | setSplitView((prevSplitView) => !prevSplitView); 38 | }, []); 39 | 40 | useEffect(() => { 41 | const handleResize = () => { 42 | setSplitViewDisabled(isSplitViewDisabled()); 43 | }; 44 | 45 | window.addEventListener('resize', handleResize); 46 | return () => { 47 | window.removeEventListener('resize', handleResize); 48 | }; 49 | }, []); 50 | 51 | const contextValue = useMemo( 52 | (): SplitViewContextValue => ({ 53 | splitView, 54 | splitViewDisabled, 55 | setSplitView, 56 | toggleSplitView, 57 | }), 58 | [splitView, splitViewDisabled, setSplitView, toggleSplitView], 59 | ); 60 | 61 | return ( 62 | 63 | {children} 64 | 65 | ); 66 | }; 67 | 68 | export const useSplitView = () => useContext(SplitViewContext); 69 | 70 | export default SplitViewContext; 71 | -------------------------------------------------------------------------------- /src/components/sidebar/menu-item.tsx: -------------------------------------------------------------------------------- 1 | import { useSidebar } from 'contexts/sidebar-context'; 2 | import { useSplitView } from 'contexts/split-view-context'; 3 | import type { BodyNumber, ColorCallback } from 'types/app'; 4 | import type { ColorInfo } from 'utils/color'; 5 | 6 | interface MenuItemProps { 7 | color: string; 8 | onClick: ColorCallback; 9 | contrast: string; 10 | name: string; 11 | textBottomLeft?: string; 12 | textBottomRight?: string; 13 | item: ColorInfo; 14 | } 15 | 16 | const MenuItem = ({ 17 | color, 18 | onClick, 19 | contrast, 20 | name, 21 | textBottomLeft, 22 | textBottomRight, 23 | item, 24 | }: MenuItemProps) => { 25 | const { closeMenu } = useSidebar(); 26 | const { splitView } = useSplitView(); 27 | 28 | const handleMainClick = () => { 29 | closeMenu(); 30 | onClick(item, 1); 31 | }; 32 | 33 | const handleSubClick = ( 34 | e: React.MouseEvent, 35 | num: BodyNumber, 36 | ) => { 37 | closeMenu(); 38 | onClick(item, num); 39 | e.stopPropagation(); 40 | }; 41 | 42 | return ( 43 |

49 |

{name}

50 |

{color}

51 |

{textBottomLeft}

52 |

{textBottomRight}

53 | {splitView && ( 54 |

55 |

handleSubClick(e, 1)}> 56 | Apply to Left 57 |

58 |

handleSubClick(e, 2)}> 59 | Apply to Right 60 |

61 |

62 | )} 63 |

64 | ); 65 | }; 66 | 67 | export default MenuItem; 68 | -------------------------------------------------------------------------------- /src/contexts/input-context.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | createContext, 3 | useState, 4 | useContext, 5 | useRef, 6 | useEffect, 7 | useMemo, 8 | useCallback, 9 | } from 'react'; 10 | import type { BodyNumber } from 'types/app'; 11 | 12 | type UpdateInputValue = (inputNum: BodyNumber, value: string) => void; 13 | 14 | interface InputContextValue { 15 | inputValue1: string; 16 | inputValue2: string; 17 | updateInputValue: UpdateInputValue; 18 | } 19 | 20 | const InputContext = createContext({ 21 | inputValue1: '', 22 | inputValue2: '', 23 | updateInputValue: () => {}, 24 | }); 25 | 26 | interface InputProviderProps { 27 | children: React.ReactNode; 28 | } 29 | 30 | export const InputProvider = ({ children }: InputProviderProps) => { 31 | const [inputValues, setInputValues] = useState({ 32 | inputValue1: '', 33 | inputValue2: '', 34 | }); 35 | 36 | const updateInputValue = useCallback( 37 | (inputNum: BodyNumber, value: string) => { 38 | setInputValues((prevInputValues) => ({ 39 | ...prevInputValues, 40 | [`inputValue${inputNum}`]: value, 41 | })); 42 | }, 43 | [], 44 | ); 45 | 46 | const contextValue = useMemo( 47 | () => ({ ...inputValues, updateInputValue }), 48 | [inputValues, updateInputValue], 49 | ); 50 | 51 | return ( 52 | 53 | {children} 54 | 55 | ); 56 | }; 57 | 58 | export const useInput = () => useContext(InputContext); 59 | 60 | interface InputUpdaterProps { 61 | inputValue1: string; 62 | inputValue2: string; 63 | } 64 | 65 | export const InputUpdater = ({ 66 | inputValue1, 67 | inputValue2, 68 | }: InputUpdaterProps) => { 69 | const prevInput1 = useRef(''); 70 | const prevInput2 = useRef(''); 71 | const { updateInputValue } = useInput(); 72 | 73 | useEffect(() => { 74 | if (inputValue1 !== prevInput1.current) { 75 | updateInputValue(1, inputValue1); 76 | prevInput1.current = inputValue1; 77 | } 78 | if (inputValue2 !== prevInput2.current) { 79 | updateInputValue(2, inputValue2); 80 | prevInput2.current = inputValue2; 81 | } 82 | }, [inputValue1, inputValue2, updateInputValue]); 83 | 84 | return null; 85 | }; 86 | 87 | export default InputContext; 88 | -------------------------------------------------------------------------------- /src/components/color-square/color-square.scss: -------------------------------------------------------------------------------- 1 | @use '../../styles/general' as general; 2 | 3 | .color-square { 4 | & > div { 5 | display: block !important; 6 | } 7 | 8 | .color-tile { 9 | padding: 0.5rem 1rem; 10 | width: 6rem; 11 | height: 6rem; 12 | border-radius: 5px; 13 | cursor: pointer; 14 | // transition: $transition-time background-color ease-in-out; 15 | background-color: #222; 16 | border: 0; 17 | outline: none; 18 | } 19 | 20 | @media only screen and (max-width: 1250px) { 21 | .color-tile { 22 | width: 5rem; 23 | height: 5rem; 24 | } 25 | } 26 | 27 | @media only screen and (max-width: 650px) { 28 | .color-tile { 29 | border-radius: 4px; 30 | width: calc(100vw / 4 - 5 / 4 * 1rem); 31 | height: calc(100vw / 4 - 5 / 4 * 1rem); 32 | } 33 | } 34 | } 35 | 36 | .body-content.split { 37 | .color-tile { 38 | width: 5rem; 39 | height: 5rem; 40 | } 41 | 42 | @media only screen and (max-width: 1150px) { 43 | .color-tile { 44 | border-radius: 4px; 45 | width: calc(50vw / 4 - 5 / 4 * 1rem); 46 | height: calc(50vw / 4 - 5 / 4 * 1rem); 47 | } 48 | } 49 | 50 | @media only screen and (max-width: 720px) { 51 | .color-tile { 52 | width: calc(50vw / 3 - 4 / 3 * 0.75rem); 53 | height: calc(50vw / 3 - 4 / 3 * 0.75rem); 54 | } 55 | } 56 | } 57 | 58 | .tooltip-title { 59 | font-size: 18px; 60 | margin-top: 13px; 61 | margin-bottom: 11px; 62 | font-weight: 600; 63 | letter-spacing: 1px; 64 | text-align: center; 65 | } 66 | 67 | .tooltip-sub-title { 68 | letter-spacing: 1px; 69 | margin-bottom: 0.2rem; 70 | } 71 | 72 | .popup-button { 73 | margin: 11px; 74 | margin-bottom: 0; 75 | 76 | &:last-of-type { 77 | margin-bottom: 11px; 78 | } 79 | 80 | button { 81 | width: 14rem; 82 | letter-spacing: 1px; 83 | transition: 80ms background-color linear; 84 | 85 | &:hover { 86 | background-color: #222; 87 | } 88 | } 89 | } 90 | 91 | .tippy-content { 92 | padding: 0; 93 | } 94 | 95 | .tippy-box { 96 | background-clip: padding-box; 97 | border: 2px solid white; 98 | } 99 | 100 | .tippy-box[data-placement^='bottom'] > .tippy-arrow:before { 101 | border-bottom-color: white; 102 | top: -8px; 103 | } 104 | -------------------------------------------------------------------------------- /src/components/header/header.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from 'react'; 2 | import { useSplitView } from 'contexts/split-view-context'; 3 | import HamburgerButton from 'components/hamburger-button'; 4 | import type { ColorInfo } from 'utils/color'; 5 | import { FaColumns, FaRandom } from 'react-icons/fa'; 6 | import HeaderIcon from './header-icon'; 7 | import HeaderButton from './header-button'; 8 | import './header.scss'; 9 | 10 | interface HeaderProps { 11 | colorData: ColorInfo; 12 | getRandomColors: () => void; 13 | } 14 | 15 | const Header = ({ colorData, getRandomColors }: HeaderProps) => { 16 | const { splitView, splitViewDisabled, toggleSplitView } = useSplitView(); 17 | 18 | return ( 19 | 70 | ); 71 | }; 72 | 73 | export default memo(Header); 74 | -------------------------------------------------------------------------------- /src/components/app/app.scss: -------------------------------------------------------------------------------- 1 | @use '../../styles/general' as general; 2 | 3 | * { 4 | box-sizing: border-box; 5 | 6 | &:focus { 7 | outline: none; 8 | } 9 | 10 | &::-webkit-scrollbar { 11 | display: none; 12 | } 13 | } 14 | 15 | html { 16 | font-size: 14px; 17 | 18 | @media only screen and (min-width: 2000px) { 19 | font-size: 16px; 20 | } 21 | } 22 | 23 | input { 24 | font-size: 16px; 25 | } 26 | 27 | input[type='search']::-webkit-search-decoration, 28 | input[type='search']::-webkit-search-results-button, 29 | input[type='search']::-webkit-search-results-decoration, 30 | input[type='search']::-webkit-search-cancel-button { 31 | -webkit-appearance: none; 32 | } 33 | 34 | input, 35 | input:before, 36 | input:after { 37 | user-select: initial; 38 | } 39 | 40 | #App { 41 | transition: general.$transition-time background-color ease-in-out; 42 | will-change: background-color; 43 | background-color: #222; 44 | } 45 | 46 | .main-container { 47 | position: relative; 48 | } 49 | 50 | .button { 51 | font-size: 1.2rem; 52 | padding: 0.5rem 1rem; 53 | background-color: transparent; 54 | border: 2px solid; 55 | color: white; 56 | border-radius: 5px; 57 | overflow: hidden; 58 | cursor: pointer; 59 | } 60 | 61 | .button-group { 62 | margin: 1rem !important; 63 | display: flex !important; 64 | > * { 65 | margin: 0 !important; 66 | border-radius: 0 !important; 67 | border-width: 2px 0 2px 2px !important; 68 | 69 | &:first-child { 70 | border-top-left-radius: 5px !important; 71 | border-bottom-left-radius: 5px !important; 72 | } 73 | 74 | &:last-child { 75 | border-top-right-radius: 5px !important; 76 | border-bottom-right-radius: 5px !important; 77 | border-right-width: 2px !important; 78 | } 79 | } 80 | } 81 | 82 | .page { 83 | display: flex; 84 | min-height: 100vh; 85 | justify-content: space-evenly; 86 | align-items: stretch; 87 | padding-top: 5rem; 88 | } 89 | 90 | .color-name { 91 | font-size: 2rem; 92 | font-weight: 600; 93 | text-transform: uppercase; 94 | letter-spacing: 2px; 95 | line-height: 2rem; 96 | text-align: center; 97 | transition: general.$transition-time color ease-in-out; 98 | } 99 | 100 | label { 101 | border: 0; 102 | clip: rect(0 0 0 0); 103 | height: 1px; 104 | margin: -1px; 105 | overflow: hidden; 106 | padding: 0; 107 | position: absolute; 108 | width: 1px; 109 | } 110 | 111 | .italic { 112 | font-style: italic; 113 | } 114 | 115 | @media only screen and (max-width: 650px) { 116 | .page { 117 | padding-top: 4rem; 118 | } 119 | 120 | .content-background { 121 | min-height: calc(100vh - 4rem); 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/components/color-square/color-square.tsx: -------------------------------------------------------------------------------- 1 | import { memo, useState, useRef } from 'react'; 2 | import { writeText as writeTextToClipboard } from 'clipboard-polyfill'; 3 | import Tooltip from '@tippyjs/react'; 4 | import type { ColorShade } from 'utils/color'; 5 | import type { BodyNumber } from 'types/app'; 6 | import 'tippy.js/dist/tippy.css'; 7 | import './color-square.scss'; 8 | 9 | interface ColorSquareProps { 10 | color: ColorShade; 11 | squareNumber: number; 12 | bodyNum: BodyNumber; 13 | } 14 | 15 | const ColorSquare = ({ 16 | color: { rgb, hex }, 17 | squareNumber, 18 | bodyNum, 19 | }: ColorSquareProps) => { 20 | const hexTimeout = useRef(null); 21 | const rgbTimeout = useRef(null); 22 | const [r, g, b] = rgb; 23 | const rgbStr = `rgb(${r}, ${g}, ${b})`; 24 | const hexStr = hex.toUpperCase(); 25 | 26 | const [rgbBtnTxt, setRgbBtnTxt] = useState(rgbStr); 27 | const [hexBtnTxt, setHexBtnTxt] = useState(hexStr); 28 | 29 | const background = 30 | squareNumber <= 18 31 | ? `rgba(255,255,255,${(95 - squareNumber * 5) / 100})` 32 | : `rgba(0,0,0,${((squareNumber - 18) * 5) / 100})`; 33 | 34 | const copyHexCode = () => { 35 | writeTextToClipboard(hexStr); 36 | setHexBtnTxt('Copied!'); 37 | if (hexTimeout.current) { 38 | clearTimeout(hexTimeout.current); 39 | } 40 | hexTimeout.current = setTimeout(() => { 41 | setHexBtnTxt(hexStr); 42 | }, 1200); 43 | }; 44 | 45 | const copyRgb = () => { 46 | writeTextToClipboard(rgbStr); 47 | setRgbBtnTxt('Copied!'); 48 | if (rgbTimeout.current) { 49 | clearTimeout(rgbTimeout.current); 50 | } 51 | rgbTimeout.current = setTimeout(() => { 52 | setRgbBtnTxt(rgbStr); 53 | }, 1200); 54 | }; 55 | 56 | return ( 57 |

58 | 69 |

CLICK TO COPY

70 |

71 | 74 |

75 |

76 | 79 |

80 |

81 | } 82 | > 83 | 91 | ); 92 | }; 93 | 94 | export default memo(ColorSquare); 95 | -------------------------------------------------------------------------------- /src/components/sidebar/color-name-menu.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useRef, useEffect, useMemo } from 'react'; 2 | import Color from 'color'; 3 | import { colornames, type ColorName } from 'color-name-list'; 4 | import { useSidebar } from 'contexts/sidebar-context'; 5 | import { getContrastColor } from 'utils/color'; 6 | import type { ColorCallback } from 'types/app'; 7 | import { FaSearch } from 'react-icons/fa'; 8 | 9 | const SEARCH_INPUT_ID = 'color-search'; 10 | 11 | interface ColorNameWithContrast extends ColorName { 12 | contrast: string; 13 | } 14 | 15 | interface ColorNameMenuProps { 16 | handleColorClick: ColorCallback; 17 | isOpen: boolean; 18 | } 19 | 20 | const ColorNameMenu = ({ handleColorClick, isOpen }: ColorNameMenuProps) => { 21 | const { closeMenu } = useSidebar(); 22 | 23 | const inputEl = useRef(null); 24 | const inputElTimeout = useRef(null); 25 | 26 | useEffect(() => { 27 | if (inputElTimeout.current) { 28 | clearTimeout(inputElTimeout.current); 29 | } 30 | if (isOpen && inputEl.current) { 31 | inputElTimeout.current = setTimeout(() => { 32 | inputEl.current?.select(); 33 | }, 310); 34 | } else { 35 | inputEl.current?.blur(); 36 | } 37 | }, [isOpen]); 38 | 39 | const [searchInput, setSearchInput] = useState(''); 40 | 41 | const colorNamesWithContrast = useMemo(() => { 42 | if (!searchInput) { 43 | return colornames.slice(0, 50).map((color) => ({ 44 | ...color, 45 | contrast: getContrastColor(Color(color.hex)).hex(), 46 | })); 47 | } 48 | return colornames 49 | .filter((color) => 50 | color.name 51 | .replace(/\s/g, '') 52 | .toLowerCase() 53 | .includes(searchInput.replace(/\s/g, '').toLowerCase()), 54 | ) 55 | .slice(0, 100) 56 | .map((color) => ({ 57 | ...color, 58 | contrast: getContrastColor(Color(color.hex)).hex(), 59 | })); 60 | }, [searchInput]); 61 | 62 | return ( 63 | <> 64 |

65 | 66 | Color search 67 | setSearchInput(e.target.value)} 74 | /> 75 |

76 | 77 |

78 |

79 | {colorNamesWithContrast.map((color) => ( 80 |

{ 85 | handleColorClick(color.hex, 1); 86 | closeMenu(); 87 | }} 88 | > 89 | {color.name} 90 |

91 | ))} 92 |

93 |

94 | 95 | ); 96 | }; 97 | 98 | export default ColorNameMenu; 99 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js'; 2 | import globals from 'globals'; 3 | import reactRefresh from 'eslint-plugin-react-refresh'; 4 | import tseslint from 'typescript-eslint'; 5 | import { globalIgnores } from 'eslint/config'; 6 | import { 7 | configs as airbnbConfigs, 8 | plugins as airbnbPlugins, 9 | } from 'eslint-config-airbnb-extended'; 10 | import prettierConfig from 'eslint-config-prettier'; 11 | import eslintPluginUnicorn from 'eslint-plugin-unicorn'; 12 | 13 | const jsConfig = [ 14 | // ESLint Recommended Rules 15 | { 16 | name: 'js/config', 17 | ...js.configs.recommended, 18 | }, 19 | // Stylistic Plugin 20 | airbnbPlugins.stylistic, 21 | // Import X Plugin 22 | airbnbPlugins.importX, 23 | // Airbnb Base Recommended Config 24 | ...airbnbConfigs.base.recommended, 25 | ]; 26 | 27 | const reactConfig = [ 28 | // React Plugin 29 | airbnbPlugins.react, 30 | // React Hooks Plugin 31 | airbnbPlugins.reactHooks, 32 | // React JSX A11y Plugin 33 | airbnbPlugins.reactA11y, 34 | // Airbnb React Recommended Config 35 | ...airbnbConfigs.react.recommended, 36 | ]; 37 | 38 | const typescriptConfig = [ 39 | // TypeScript ESLint Plugin 40 | airbnbPlugins.typescriptEslint, 41 | // Airbnb Base TypeScript Config 42 | ...airbnbConfigs.base.typescript, 43 | // Airbnb React TypeScript Config 44 | ...airbnbConfigs.react.typescript, 45 | ]; 46 | 47 | export default tseslint.config([ 48 | globalIgnores(['dist']), 49 | { 50 | files: ['**/*.{ts,tsx}'], 51 | extends: [ 52 | jsConfig, 53 | js.configs.recommended, 54 | tseslint.configs.recommended, 55 | reactConfig, 56 | typescriptConfig, 57 | reactRefresh.configs.vite, 58 | eslintPluginUnicorn.configs.recommended, 59 | prettierConfig, 60 | ], 61 | languageOptions: { 62 | ecmaVersion: 2020, 63 | globals: globals.browser, 64 | }, 65 | rules: { 66 | '@typescript-eslint/consistent-type-imports': [ 67 | 'warn', 68 | { 69 | prefer: 'type-imports', 70 | disallowTypeAnnotations: true, 71 | fixStyle: 'inline-type-imports', 72 | }, 73 | ], 74 | curly: 'error', 75 | 'import-x/prefer-default-export': 'off', 76 | 'no-restricted-syntax': 'off', 77 | 'no-restricted-exports': 'off', 78 | 'react-refresh/only-export-components': 'off', 79 | 'react/react-in-jsx-scope': 'off', 80 | 'react/require-default-props': 'off', 81 | 'react/function-component-definition': [ 82 | 'error', 83 | { 84 | namedComponents: 'arrow-function', 85 | unnamedComponents: 'arrow-function', 86 | }, 87 | ], 88 | // These should be enabled 89 | 'jsx-a11y/click-events-have-key-events': 'off', 90 | 'jsx-a11y/no-static-element-interactions': 'off', 91 | 'jsx-a11y/no-noninteractive-element-interactions': 'off', 92 | 'jsx-a11y/label-has-associated-control': 'off', 93 | // Turn off Unicorn rules 94 | 'unicorn/prevent-abbreviations': 'off', 95 | 'unicorn/explicit-length-check': 'off', 96 | 'unicorn/no-array-reduce': 'off', 97 | 'unicorn/no-null': 'off', 98 | 'unicorn/prefer-object-from-entries': 'off', 99 | 'unicorn/prefer-string-replace-all': 'off', 100 | }, 101 | }, 102 | ]); 103 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | import { useSidebar } from 'contexts/sidebar-context'; 3 | import { FaHistory, FaQuestionCircle, FaSearch } from 'react-icons/fa'; 4 | import type { ColorCallback } from 'types/app'; 5 | import HelpMenu from './help-menu'; 6 | import ColorHistory from './color-history'; 7 | import ColorNameMenu from './color-name-menu'; 8 | import MainMenuItem from './main-menu-item'; 9 | import SubMenu from './sub-menu'; 10 | import SidebarFooter from './sidebar-footer'; 11 | import './sidebar.scss'; 12 | 13 | const initialMenuStates = { 14 | isMainMenuOpen: true, 15 | isHistoryMenuOpen: false, 16 | isSearchMenuOpen: false, 17 | isTopColorsMenuOpen: false, 18 | isHelpMenuOpen: false, 19 | }; 20 | 21 | interface SidebarProps { 22 | handleColorClick: ColorCallback; 23 | } 24 | 25 | const Sidebar = ({ handleColorClick }: SidebarProps) => { 26 | const { isMenuOpen, closeMenu } = useSidebar(); 27 | 28 | useEffect(() => { 29 | const handleKeyPress = (e: KeyboardEvent) => { 30 | if (e.code === 'Escape') { 31 | closeMenu(); 32 | } 33 | }; 34 | 35 | globalThis.addEventListener('keydown', handleKeyPress); 36 | return () => { 37 | globalThis.removeEventListener('keydown', handleKeyPress); 38 | }; 39 | }, [closeMenu]); 40 | 41 | const [menuStates, updateMenuStates] = useState(initialMenuStates); 42 | 43 | const openMenu = (menuId: string) => { 44 | const newMenuStates = { 45 | ...initialMenuStates, 46 | isMainMenuOpen: false, 47 | }; 48 | newMenuStates[`is${menuId}Open` as keyof typeof newMenuStates] = true; 49 | updateMenuStates(newMenuStates); 50 | }; 51 | 52 | const closeSubMenu = () => { 53 | if (document.activeElement instanceof HTMLElement) { 54 | document.activeElement.blur(); 55 | } 56 | updateMenuStates({ ...initialMenuStates }); 57 | }; 58 | 59 | return ( 60 |

61 |

62 |

67 | 73 | 79 | 85 | 86 |

87 | 88 | 93 | 94 | 95 | 96 | 107 | 108 | 113 | 114 | 115 |

116 |

117 |

118 | ); 119 | }; 120 | 121 | export default Sidebar; 122 | -------------------------------------------------------------------------------- /src/components/header/header.scss: -------------------------------------------------------------------------------- 1 | @use '../../styles/colors' as colors; 2 | @use '../../styles/general' as general; 3 | 4 | #header { 5 | height: 5rem; 6 | text-align: center; 7 | position: fixed; 8 | width: 100%; 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | transition: general.$transition-time all linear; 13 | z-index: 2000; 14 | border-bottom: 2px solid colors.$contrast; 15 | background-color: colors.$color; 16 | 17 | * { 18 | transition: general.$transition-time all linear; 19 | } 20 | 21 | .left-content { 22 | text-align: center; 23 | margin-left: 3rem; 24 | display: flex; 25 | align-items: center; 26 | cursor: default; 27 | color: colors.$contrast; 28 | 29 | h1 { 30 | font-size: 2rem; 31 | font-weight: 400; 32 | text-transform: uppercase; 33 | letter-spacing: 2px; 34 | } 35 | 36 | .icon { 37 | display: grid; 38 | grid-template-columns: 12px 12px; 39 | grid-gap: 2px; 40 | margin-right: 0.8rem; 41 | padding: 1px; 42 | cursor: pointer; 43 | 44 | .icon-dot { 45 | height: 12px; 46 | background-color: rgba(0, 0, 0, 0.3); 47 | display: flex; 48 | border-radius: 2px; 49 | } 50 | } 51 | } 52 | 53 | .right-content { 54 | display: inline-flex; 55 | align-items: center; 56 | margin-right: 3rem; 57 | 58 | .button-section { 59 | display: flex; 60 | margin-right: 3rem; 61 | } 62 | } 63 | 64 | .icon-button { 65 | margin-left: 0.75rem; 66 | border-radius: 5px; 67 | padding: 6px 12px; 68 | font-size: 1.3rem; 69 | display: flex; 70 | align-items: center; 71 | cursor: pointer; 72 | font-weight: 600; 73 | border: 2px solid colors.$contrast; 74 | color: colors.$contrast; 75 | user-select: none; 76 | 77 | &.active { 78 | color: colors.$opposite-contrast; 79 | background-color: colors.$contrast; 80 | 81 | i { 82 | color: colors.$opposite-contrast; 83 | padding: 2px 0; 84 | } 85 | 86 | span { 87 | color: colors.$opposite-contrast; 88 | } 89 | } 90 | 91 | i { 92 | font-size: 1.4rem; 93 | color: colors.$contrast; 94 | } 95 | 96 | span { 97 | margin-left: 10px; 98 | color: colors.$contrast; 99 | } 100 | } 101 | 102 | .menu-icon { 103 | transition: color general.$transition-time linear; 104 | } 105 | 106 | @media only screen and (max-width: 900px) { 107 | .right-content { 108 | .icon-button { 109 | .icon-button-text { 110 | display: none; 111 | } 112 | } 113 | } 114 | } 115 | 116 | @media only screen and (max-width: 650px) { 117 | height: 4rem; 118 | 119 | .left-content { 120 | margin-left: 1rem; 121 | 122 | h1 { 123 | font-size: 1.5rem; 124 | letter-spacing: 0; 125 | } 126 | } 127 | 128 | .right-content { 129 | display: inline-flex; 130 | align-items: center; 131 | margin-right: 1rem; 132 | 133 | .button-section { 134 | margin-right: 1rem; 135 | } 136 | 137 | .bars.big.icon { 138 | margin-left: 0; 139 | } 140 | 141 | .icon-button { 142 | padding: 6px 7px; 143 | 144 | .random-button-text { 145 | display: none; 146 | } 147 | } 148 | } 149 | } 150 | 151 | @media only screen and (max-width: 600px) { 152 | .right-content { 153 | .button-section { 154 | .icon-button { 155 | margin: 0; 156 | 157 | &.split-button { 158 | display: none; 159 | } 160 | } 161 | } 162 | } 163 | } 164 | 165 | @media only screen and (max-width: 370px) { 166 | .left-content { 167 | .icon { 168 | display: none; 169 | } 170 | } 171 | 172 | .right-content { 173 | .button-section { 174 | margin-right: 0.5rem; 175 | } 176 | } 177 | } 178 | } 179 | -------------------------------------------------------------------------------- /src/components/body-content/body-content.scss: -------------------------------------------------------------------------------- 1 | @use '../../styles/general' as general; 2 | 3 | .content-background { 4 | min-height: calc(100vh - 5rem); 5 | flex: 1; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | transition: background-color general.$transition-time linear; 10 | will-change: background-color; 11 | } 12 | 13 | .body-content { 14 | .input-container { 15 | width: 100%; 16 | display: inline-flex; 17 | align-items: center; 18 | justify-content: space-between; 19 | flex-wrap: wrap; 20 | padding: 1rem 1rem 0 1rem; 21 | 22 | .color-input { 23 | width: 27rem; 24 | display: flex; 25 | 26 | input { 27 | display: inline-flex; 28 | flex: 7; 29 | -webkit-flex: 7 1; 30 | height: 3rem; 31 | border: 2px solid black; 32 | border-right: 0; 33 | border-radius: 5px 0 0 5px; 34 | margin: 0; 35 | padding: 0 0.75rem; 36 | overflow: visible; 37 | -webkit-appearance: none; 38 | outline-offset: -2px; 39 | 40 | &::-webkit-search-cancel-button { 41 | cursor: pointer; 42 | height: 16px; 43 | width: 16px; 44 | background-image: url('../../images/clear-input.svg'); 45 | } 46 | } 47 | 48 | button { 49 | flex: 0 0 6rem; 50 | -webkit-flex: 0 0 6rem; 51 | cursor: pointer; 52 | border: 2px solid black; 53 | border-radius: 0 5px 5px 0; 54 | font-weight: 600; 55 | display: flex; 56 | justify-content: center; 57 | align-items: center; 58 | font-size: 1.4rem; 59 | line-height: 1.4rem; 60 | color: #272a29; 61 | margin: 0; 62 | } 63 | } 64 | } 65 | 66 | .container { 67 | display: grid; 68 | grid-template-columns: repeat(9, auto); 69 | border-radius: 10px; 70 | padding: 1rem; 71 | grid-gap: 1rem; 72 | } 73 | } 74 | 75 | @media only screen and (max-width: 1250px) { 76 | .body-content { 77 | .input-container { 78 | .color-input { 79 | width: 23rem; 80 | 81 | button { 82 | flex: 0 0 5rem; 83 | } 84 | } 85 | 86 | .color-name { 87 | font-size: 1.8rem; 88 | } 89 | } 90 | } 91 | } 92 | 93 | @media only screen and (max-width: 950px) { 94 | .body-content { 95 | .container { 96 | grid-template-columns: repeat(6, auto); 97 | } 98 | 99 | .input-container { 100 | flex-direction: column-reverse; 101 | .color-input { 102 | width: 100%; 103 | margin-bottom: 0; 104 | } 105 | 106 | .color-name { 107 | width: 100%; 108 | text-align: left; 109 | margin-bottom: 1rem; 110 | } 111 | } 112 | } 113 | } 114 | 115 | @media only screen and (max-width: 650px) { 116 | .page { 117 | padding-top: 4rem; 118 | 119 | .body-content { 120 | .container { 121 | grid-template-columns: repeat(4, auto); 122 | width: 100vw; 123 | } 124 | } 125 | } 126 | } 127 | 128 | .body-content.split { 129 | .container { 130 | grid-template-columns: repeat(6, auto); 131 | } 132 | 133 | .input-container { 134 | flex-direction: column-reverse; 135 | .color-input { 136 | width: 100%; 137 | margin-bottom: 0; 138 | } 139 | 140 | .color-name { 141 | width: 100%; 142 | text-align: left; 143 | margin-bottom: 1rem; 144 | } 145 | } 146 | 147 | @media only screen and (max-width: 1150px) { 148 | .container { 149 | grid-template-columns: repeat(4, auto); 150 | width: 50vw; 151 | } 152 | } 153 | 154 | @media only screen and (max-width: 720px) { 155 | .container { 156 | grid-template-columns: repeat(3, auto); 157 | grid-gap: 0.75rem; 158 | padding: 0.75rem; 159 | } 160 | 161 | .input-container { 162 | padding: 0.75rem 0.75rem 0 0.75rem; 163 | 164 | .color-name { 165 | margin-bottom: 0.75rem; 166 | } 167 | } 168 | } 169 | } 170 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | 25 | 34 | 35 | Shade Generator | A graphic designer's best friend 36 | 40 | 44 | 48 | 49 | 50 | 51 | 52 | 53 | 101 | 102 | 103 |

Something went wrong :(You need to enable Javascript to use this website 107 | 108 | Click here for instructions 109 | 110 |

112 |

113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | Vite + React + TS 124 | 125 | 126 |

127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 11 | 17 | 18 | 22 | 23 | 24 | 29 | 30 | 31 | 35 | 36 | 40 | 41 | 42 | 51 | 52 | Shade Generator | A graphic designer's best friend 53 | 57 | 61 | 65 | 66 | 67 | 68 | 69 | 70 | 118 | 119 | 120 |

Something went wrong :(You need to enable Javascript to use this website 124 | 125 | Click here for instructions 126 | 127 |

129 |

130 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /src/utils/color.ts: -------------------------------------------------------------------------------- 1 | import nearestColor from 'nearest-color'; 2 | import { colornames } from 'color-name-list'; 3 | import parseColor from 'parse-color'; 4 | import Color, { type ColorInstance, type ColorLike } from 'color'; 5 | 6 | export interface ColorShade { 7 | hex: string; 8 | rgb: number[]; 9 | contrastRatio: number; 10 | contrastLevel: string; 11 | isDark: boolean; 12 | } 13 | 14 | export interface ColorInfo { 15 | contrast: string; 16 | hex: string; 17 | rgb: number[]; 18 | cmyk: number[]; 19 | hsl: number[]; 20 | hsv: number[]; 21 | name: string; 22 | highContrast: string; 23 | lowContrast: string; 24 | oppositeContrast: string; 25 | shades: ColorShade[]; 26 | timeString?: string; 27 | dateString?: string; 28 | keyword?: string; 29 | } 30 | 31 | export function getRandomColor(): ColorInstance { 32 | const color = [...'0123456789ABCDEF'].reduce( 33 | (a: string, _c: string, i: number, arr: string[]) => 34 | i < 6 ? a + arr[Math.floor(Math.random() * 16)] : a, 35 | '#', 36 | ); 37 | return Color(color); 38 | } 39 | 40 | function calculateGradient( 41 | color: ColorInstance, 42 | isDark: boolean, 43 | opacity: number, 44 | ): ColorInstance { 45 | return isDark 46 | ? color.mix(Color('black'), opacity).rgb().round() 47 | : color.mix(Color('white'), opacity).rgb().round(); 48 | } 49 | 50 | export function getContrastColor( 51 | color: ColorInstance, 52 | minContrastRatio = 4.5, 53 | ): ColorInstance { 54 | const isDark = !color.isDark(); 55 | let i = 0.01; 56 | let contrastColor: ColorInstance | undefined; 57 | let contrastRatio = 0; 58 | while (contrastRatio < minContrastRatio && i < 0.9) { 59 | contrastColor = calculateGradient(color, isDark, i); 60 | contrastRatio = color.contrast(contrastColor); 61 | i += 0.01; 62 | } 63 | return contrastColor!; 64 | } 65 | 66 | export function getOppositeContrastColor(color: ColorInstance): ColorInstance { 67 | const isDark = color.isLight(); 68 | return calculateGradient(color, !isDark, 0.3); 69 | } 70 | 71 | export function getHighContrastColor(color: ColorInstance): ColorInstance { 72 | const isDark = color.isLight(); 73 | return calculateGradient(color, isDark, 0.7); 74 | } 75 | 76 | export function getLowContrastColor(color: ColorInstance): ColorInstance { 77 | const isDark = color.isLight(); 78 | return calculateGradient(color, isDark, 0.2); 79 | } 80 | 81 | export function searchNamedColors(searchTerm: string): string | null { 82 | for (const color of colornames) { 83 | if (color.name.replaceAll(/\s/g, '').toLowerCase() === searchTerm) { 84 | return color.hex.toUpperCase(); 85 | } 86 | } 87 | return null; 88 | } 89 | 90 | // Uses the named-colors library for a list of named of colors 91 | // and uses nearest color to match the entered color to the closest 92 | // option with a name 93 | export function getColorName(hexCode: string): string { 94 | const colors = colornames.reduce>( 95 | (o, { name, hex }) => Object.assign(o, { [name]: hex }), 96 | {}, 97 | ); 98 | const nearest = nearestColor.from(colors); 99 | const result = nearest(hexCode); 100 | return result ? result.name : ''; 101 | } 102 | 103 | export function calcAllGradients(color: ColorInstance): ColorShade[] { 104 | const gradientArr: ColorShade[] = []; 105 | for (let opac = 90; opac >= 5; opac -= 5) { 106 | const newColor = calculateGradient(color, false, opac / 100); 107 | gradientArr.push({ 108 | hex: newColor.hex(), 109 | rgb: newColor.rgb().array(), 110 | contrastRatio: color.contrast(newColor), 111 | contrastLevel: color.level(newColor), 112 | isDark: newColor.isDark(), 113 | }); 114 | } 115 | for (let opac = 5; opac <= 90; opac += 5) { 116 | const newColor = calculateGradient(color, true, opac / 100); 117 | gradientArr.push({ 118 | hex: newColor.hex(), 119 | rgb: newColor.rgb().array(), 120 | contrastRatio: color.contrast(newColor), 121 | contrastLevel: color.level(newColor), 122 | isDark: newColor.isDark(), 123 | }); 124 | } 125 | return gradientArr; 126 | } 127 | 128 | export function attemptCreateColor(colorStr: ColorLike): ColorInstance | null { 129 | try { 130 | const color = Color(colorStr); 131 | return color; 132 | } catch { 133 | return null; 134 | } 135 | } 136 | 137 | export function getAllColorInfo(colorVal: ColorInstance | string): ColorInfo { 138 | const color = typeof colorVal === 'string' ? Color(colorVal) : colorVal; 139 | 140 | return { 141 | contrast: getContrastColor(color).hex(), 142 | hex: color.hex(), 143 | rgb: color.rgb().array(), 144 | cmyk: color.cmyk().array(), 145 | hsl: color.hsl().array(), 146 | hsv: color.hsv().array(), 147 | name: getColorName(color.hex()), 148 | 149 | highContrast: getContrastColor(color, 7).hex(), 150 | lowContrast: getLowContrastColor(color).hex(), 151 | oppositeContrast: getOppositeContrastColor(color).hex(), 152 | shades: calcAllGradients(color), 153 | }; 154 | } 155 | 156 | export function parseColorFromString(str: string): string { 157 | const cleanStr = str.replaceAll(/\s/g, '').toLowerCase(); 158 | const hex = 159 | attemptCreateColor(cleanStr)?.hex() || 160 | attemptCreateColor(`#${cleanStr}`)?.hex() || 161 | parseColor(cleanStr)?.hex || 162 | searchNamedColors(cleanStr) || 163 | ''; 164 | return hex.toUpperCase(); 165 | } 166 | -------------------------------------------------------------------------------- /src/components/app/app.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useRef, useCallback } from 'react'; 2 | import ReactGA from 'react-ga4'; 3 | import useOnline from 'hooks/use-online'; 4 | import { useSplitView } from 'contexts/split-view-context'; 5 | import { useHistory } from 'contexts/history-context'; 6 | import Header from 'components/header'; 7 | import Sidebar from 'components/sidebar'; 8 | import BodyContent from 'components/body-content'; 9 | import { InputUpdater } from 'contexts/input-context'; 10 | import { 11 | getAllColorInfo, 12 | getRandomColor, 13 | attemptCreateColor, 14 | parseColorFromString, 15 | type ColorInfo, 16 | } from 'utils/color'; 17 | import './app.scss'; 18 | import type { ColorInstance } from 'color'; 19 | import type { BodyNumber, ColorCallback } from 'types/app'; 20 | import { parseURL, type UrlState } from 'utils/url'; 21 | 22 | const [urlHex1, urlHex2, initialSplitState] = parseURL(); 23 | 24 | const initialColor1 = getAllColorInfo( 25 | urlHex1.length 26 | ? (attemptCreateColor(urlHex1) as ColorInstance) 27 | : getRandomColor(), 28 | ); 29 | 30 | const initialColor2 = getAllColorInfo( 31 | urlHex2.length 32 | ? (attemptCreateColor(urlHex2) as ColorInstance) 33 | : getRandomColor(), 34 | ); 35 | 36 | const App = () => { 37 | const isOnline = useOnline(); 38 | const [colorData1, setColorData1] = useState(initialColor1); 39 | const [colorData2, setColorData2] = useState(initialColor2); 40 | const hex1 = colorData1.hex; 41 | const hex2 = colorData2.hex; 42 | const [curInputVal1, setCurInputVal1] = useState(urlHex1); 43 | const [curInputVal2, setCurInputVal2] = useState(urlHex2); 44 | 45 | const popCount = useRef(2); 46 | 47 | const { splitView, splitViewDisabled, setSplitView } = useSplitView(); 48 | 49 | const { updateRecentColors } = useHistory(); 50 | 51 | const updateStateValues = useCallback( 52 | (color, colorNum) => { 53 | const addMenuItem = (newColor: ColorInfo) => { 54 | const colorToAdd = { ...newColor }; 55 | const addedAt = new Date(); 56 | colorToAdd.timeString = addedAt.toLocaleTimeString([], { 57 | hour: 'numeric', 58 | minute: 'numeric', 59 | }); 60 | colorToAdd.dateString = addedAt.toLocaleDateString(); 61 | 62 | updateRecentColors(colorToAdd); 63 | }; 64 | 65 | let colorData; 66 | if (typeof color === 'object') { 67 | colorData = color?.shades?.[0]?.contrastRatio 68 | ? color 69 | : getAllColorInfo(color.hex); 70 | } else if (typeof color === 'string') { 71 | colorData = getAllColorInfo(color); 72 | } else { 73 | throw new TypeError('Invalid color'); 74 | } 75 | 76 | delete colorData.keyword; 77 | if (colorNum === 1) { 78 | setColorData1(colorData); 79 | setCurInputVal1(colorData.hex); 80 | } else if (colorNum === 2) { 81 | setColorData2(colorData); 82 | setCurInputVal2(colorData.hex); 83 | } 84 | 85 | addMenuItem({ ...colorData }); 86 | }, 87 | [updateRecentColors], 88 | ); 89 | 90 | const getRandomColors = () => { 91 | ReactGA.event({ 92 | category: 'Button Press', 93 | action: 'Random color button', 94 | }); 95 | const randomColor1 = getAllColorInfo(getRandomColor()); 96 | updateStateValues(randomColor1, 1); 97 | 98 | if (splitView && !splitViewDisabled) { 99 | const randomColor2 = getAllColorInfo(getRandomColor()); 100 | updateStateValues(randomColor2, 2); 101 | } 102 | }; 103 | 104 | const handleSubmit = (inputNum: BodyNumber, inputVal: string) => { 105 | const hex = parseColorFromString(inputVal); 106 | if (hex) { 107 | updateStateValues(hex, inputNum); 108 | } 109 | }; 110 | 111 | // initialize app 112 | useEffect(() => { 113 | if (isOnline) { 114 | ReactGA.initialize(import.meta.env.VITE_APP_GA_CODE); 115 | ReactGA.event({ 116 | category: 'Connection', 117 | action: 'Connected to Shade Generator', 118 | }); 119 | } else { 120 | console.log('offline detected'); 121 | } 122 | 123 | setSplitView(initialSplitState); 124 | }, [isOnline, setSplitView]); 125 | 126 | // Update url when colors change or when split view 127 | useEffect(() => { 128 | if (popCount.current) { 129 | popCount.current -= 1; 130 | } else { 131 | const newState: UrlState = { hex1 }; 132 | let newPath = hex1.slice(1); 133 | if (splitView && !splitViewDisabled) { 134 | newState.hex2 = hex2; 135 | newPath += `-${hex2.slice(1)}`; 136 | } 137 | globalThis.history.pushState(newState, 'Shade Generator', newPath); 138 | } 139 | }, [hex1, hex2, splitView, splitViewDisabled]); 140 | 141 | // update color states based on previous url 142 | useEffect(() => { 143 | const handlePopState = (e: PopStateEvent) => { 144 | popCount.current = 1; 145 | if (e?.state?.hex2) { 146 | popCount.current = 2; 147 | } 148 | 149 | updateStateValues(e?.state?.hex1, 1); 150 | if (e?.state?.hex2) { 151 | updateStateValues(e.state.hex2, 2); 152 | setSplitView(true); 153 | } else { 154 | setSplitView(false); 155 | } 156 | }; 157 | 158 | globalThis.addEventListener('popstate', handlePopState); 159 | return () => { 160 | globalThis.removeEventListener('popstate', handlePopState); 161 | }; 162 | }, [setSplitView, updateStateValues]); 163 | 164 | return ( 165 |

166 | 167 |

168 |

169 | 170 |

171 | 176 | {splitView && !splitViewDisabled && ( 177 | 182 | )} 183 |

184 |

185 |

186 | ); 187 | }; 188 | 189 | export default App; 190 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

shade-generator

4 |

5 |

Generate shades... AND tints of your favorite colors

6 |

7 | 8 | Shade Generator aims to provide a quick and easy way to generate the shades and tints of the colors you use in all of your web development and design projects. 9 | 10 | It's very easy to use. Just enter the color you would like to get shades for (accepts hex, css names, rgb, and more) and the site does the rest. Hover over the shade you want the color code for (or tap on mobile) and click on the format you would like to copy to your clipboard. If you want some inspiration, check out the sidebar where you can see the most popularly used colors as well as a the most recent. You can also view the list of named colors to get a broad range of color inspiration. 11 | 12 | ![](github/demo_small.gif) 13 | 14 | ## The Story behind Shade Generator (a.k.a. the boring part) 15 | 16 | Shade generator is a project that started as a codepen a couple years ago. The idea behind it was simple, when you overlap a color with a transparent white or black section, you end up with a tint or shade of that color. As many people do in web development, I would often use this trick to create a contrasting color effect for button hovers or element borders. This got annoying because in order to make the effect work, I would need two elements on the screen for the overlap where I often only needed one. So, I decided to make a little tool to help me find the color codes for this resulting shade by giving me a variety of overlapping icons with the color I was plannibg on using as the background. However it was still not the most convenient because I had to use a chrome plugin called ColorZilla to get the actual code of the resulting color, however I could not think of a better way. Finally, after using this tool hundreds of times I finally thought, there must be some way to calculate this resulting color! 17 | 18 | After a quick google search, I found [this link](https://www.viget.com/articles/equating-color-and-transparency/). I quickly realized calculating the colors I wanted was possible with this very simple formula: 19 | 20 |

21 | shade formula 22 |

23 | 24 | From there it all just spiraled into me going overboard in making a very simple task into a fullblown web app. Overall the main thing I got out of this was experience with React and Firebase, so I'd say it was worth the effort. 25 | 26 | ## Features 27 | 28 | Throughout the process of making this website, I slowly started adding in some cool additional features. Some served a purpose, some just for fun. 29 | 30 | ### Color Parser 31 | 32 | One of the first things I added was the NPM package [parse-color](https://www.npmjs.com/package/parse-color). It takes a string and parses it for its color values in many different formats. It can parse colors from hex values, rgb values, css named colors, and cymk formats. The result is an object that has the following components: 33 | 34 | - **rgb** - an array of [ red, green, blue ] 35 | - **hsl** - an array of [ hue, saturation, luminosity ] 36 | - **hsv** - an array of [ hue, saturation, value ] 37 | - **cmyk** - an array of [ cyan, magenta, yellow, blac(k) ] 38 | - **keyword** - the name of the color, if known 39 | - **hex** - the hex rgb string #rrggbb 40 | - **rgba** - rgb plus an alpha value 41 | - **hsla** - hsl plus an alpha value 42 | - **hsva** - hsv plus an alpha value 43 | - **cmyka** - cmyk plus an alpha value 44 | 45 | This was useful, not only to interpret input from the user but also for providing hex and rgb values, both of which are important to this app's functionality. After scrubbing the user input before passing it to this function, it does a great job of matching everything you'd expect it to! 46 | 47 | Eventually I discovered a package that is already installed in create-react-app by default called [color](https://www.npmjs.com/package/color). I'm pretty shocked that I missed this one considering the name, its popularity (6.5M downloads/week, 480M downloads total), and its functionality. Not only can it do all of the conversion I need for my app, but also has some built in tools to find the shades, as well as the contrast ratios used for the text. 48 | 49 | ### Copy to Clipboard 50 | 51 | The next main thing I added was the option to click to copy either the hex code or the rgb code to your clipboard. The first two things I tried were `document.execCommand("copy")` and `navigator.clipboard.write()`. Both of these options worked but I ran into issued with them working on all devices. I soon stumbled upon a nice small NPM package called [clipboard-polyfill](https://www.npmjs.com/package/clipboard-polyfill). It is nice and compact and gave me a convenient way to ensure copying would work on all devices and browser the clipboard is accessible in! 52 | 53 | ### Color Names 54 | 55 | Now that the basic features were in place, it was time to have some fun! I decided that the page was a little too plain so I thought I would add some names for the colors. The first library I added for this is called [color-namer](https://www.npmjs.com/package/color-namer). It appealed to me because of the fact that it offered a combination of multiple lists of colors including CSS colors, X11, Pantone, and NTC. 56 | 57 | After running into some problems with this package (I can't quite remember what) I decided to keep looking around. Somehow I missed the amazing package [color-name-list](https://www.npmjs.com/package/color-name-list). It contains a whopping 18,000+ (and growing) color list which combines over 15 different sources of color names along with thousands of user submission. While this list is massive, it still only contains 0.11% of the total possible RGB combinations so in order to match all colors so in order to match it to an input color, I used the package nearest-color. This matches the color the user enters with the closest color from the list, and due to the magnitude of color-name-list, it's usually pretty damn close! 58 | 59 | ### Random Colors 60 | 61 | So now I have the main functionality I want and a little pizzazz, I realized I needed a faster way to test the app. So I decided the best way would be to add a random color generator. This may seem like it should have been an obvious thing to make from the start but it took me a while to realize it (I know, sometimes I'm thick). It took me all of 5 minutes to add it and get it going and it made a world of difference. These are the function I ended up with: 62 | 63 | ```js 64 | function getRandomHexColor() { 65 | return '0123456789ABCDEF'.split('').reduce((a, c, i, arr) => { 66 | return i < 6 ? a + arr[Math.floor(Math.random() * 16)] : a; 67 | }, '#'); 68 | } 69 | 70 | function getRandomRgbColor() { 71 | return Array(3) 72 | .fill() 73 | .map(() => Math.floor(Math.random() * 255)); 74 | } 75 | ``` 76 | 77 | Now when I'm looking for colors for a new website, I'll just hit random until something stands out to me. And I still get a kick out some of the names. 78 | 79 | ### Color History 80 | 81 | This was a feature that I added more for the experience than an it actually providing much value. I had been wanting to mess around with [Firebase Firestore](https://firebase.google.com/), Google's real time noSQL database, for a while and this was the perfect excuse. I added a simple collection for storing the globally most recent colors that anyone has submitted, updating their timestamp every time it is used. I could not have been more happy with how easy it was to set up. It was so fast to set up in fact that I had the history sidebar up and running in one evening and soon after I added a section for the most used colors as well. If you are ever interested in quickly bootstrapping a project that requires storing data, I highly recommend giving Firebase a shot 82 | 83 | ### Offline Capability 84 | 85 | _work in progress..._ 86 | 87 | ### Split Screen 88 | 89 | _work in progress..._ 90 | 91 | ### Sharing Colors 92 | 93 | _work in progress..._ 94 | -------------------------------------------------------------------------------- /src/components/sidebar/sidebar.scss: -------------------------------------------------------------------------------- 1 | @use '../../styles/colors' as colors; 2 | 3 | #sidebar { 4 | visibility: visible; 5 | opacity: 1; 6 | overflow: hidden; 7 | z-index: 1300; 8 | 9 | &.hidden { 10 | .background { 11 | opacity: 0; 12 | visibility: hidden; 13 | } 14 | 15 | .sidebar-content { 16 | transform: translateX(100%); 17 | } 18 | } 19 | 20 | .background { 21 | z-index: 1400; 22 | position: fixed; 23 | height: 100vh; 24 | width: 100vw; 25 | top: 0; 26 | left: 0; 27 | background-color: rgba(0, 0, 0, 0.4); 28 | transition: 300ms all ease-out; 29 | } 30 | 31 | .sidebar-content { 32 | overflow: hidden; 33 | position: fixed; 34 | right: 0; 35 | top: 5rem; 36 | bottom: 0; 37 | width: 30rem; 38 | max-width: 100vw; 39 | z-index: 1500; 40 | transform: none; 41 | transition: 300ms ease-out transform; 42 | will-change: tranform; 43 | 44 | @media only screen and (max-width: 650px) { 45 | top: 4rem; 46 | width: 100vw; 47 | } 48 | 49 | @media only screen and (max-width: 550px) { 50 | width: 100vw; 51 | } 52 | 53 | > * { 54 | transition: 300ms ease-out transform; 55 | } 56 | } 57 | 58 | .main-menu-items { 59 | position: absolute; 60 | top: 0; 61 | left: 0; 62 | width: 100%; 63 | height: 100%; 64 | transform: none; 65 | display: flex; 66 | flex-direction: column; 67 | background-color: colors.$color; 68 | 69 | &.hidden { 70 | transform: translateX(-100%); 71 | } 72 | 73 | .main-menu-item { 74 | display: flex; 75 | align-items: center; 76 | padding: 1.5rem; 77 | cursor: pointer; 78 | color: colors.$high-contrast; 79 | border-bottom: 1px solid colors.$contrast; 80 | 81 | &:hover { 82 | background-color: colors.$hover; 83 | } 84 | 85 | span { 86 | text-transform: uppercase; 87 | font-weight: 600; 88 | letter-spacing: 2px; 89 | } 90 | 91 | * { 92 | font-size: 1.6rem; 93 | } 94 | 95 | .icon { 96 | width: 2rem; 97 | margin-right: 1.5rem; 98 | margin-left: 0.5rem; 99 | } 100 | } 101 | } 102 | 103 | .sub-menu { 104 | position: absolute; 105 | width: 100%; 106 | height: 100%; 107 | display: flex; 108 | flex-direction: column; 109 | transform: translateX(0); 110 | background-color: colors.$color; 111 | 112 | &.hidden { 113 | transform: translateX(100%); 114 | } 115 | 116 | .search-input-container { 117 | width: 100%; 118 | height: 3.5rem; 119 | display: flex; 120 | align-items: center; 121 | background-color: white; 122 | line-height: auto; 123 | 124 | .icon { 125 | font-size: 1.5rem; 126 | color: #222; 127 | margin: 0 0.75rem 0 1.25rem; 128 | } 129 | 130 | input { 131 | height: 100%; 132 | flex: 1; 133 | border: 0; 134 | border-radius: 0; 135 | font-size: 1.6rem; 136 | padding-right: 1rem; 137 | margin: 0; 138 | overflow: hidden; 139 | -webkit-appearance: none; 140 | 141 | &::-webkit-search-cancel-button { 142 | cursor: pointer; 143 | height: 16px; 144 | width: 16px; 145 | background-image: url('../../images/clear-input.svg'); 146 | } 147 | } 148 | } 149 | 150 | .sub-menu-header { 151 | outline: none; 152 | appearance: none; 153 | border: none; 154 | display: flex; 155 | align-items: center; 156 | padding: 1rem 1.5rem; 157 | cursor: pointer; 158 | color: colors.$high-contrast; 159 | border-bottom: 1px solid colors.$contrast; 160 | background-color: colors.$color; 161 | 162 | &:hover { 163 | background-color: colors.$hover; 164 | } 165 | 166 | span { 167 | text-transform: uppercase; 168 | font-weight: 600; 169 | letter-spacing: 2px; 170 | } 171 | 172 | * { 173 | font-size: 1.6rem; 174 | } 175 | 176 | .icon { 177 | width: 2rem; 178 | margin-right: 1.5rem; 179 | margin-left: 0.5rem; 180 | } 181 | } 182 | 183 | .sub-menu-content { 184 | flex: 1; 185 | overflow-y: scroll; 186 | -webkit-overflow-scrolling: touch; 187 | } 188 | } 189 | 190 | .menu-items { 191 | .color-result-item { 192 | padding: 1.5rem 1.25rem; 193 | font-size: 1.6rem; 194 | line-height: 2.1rem; 195 | font-weight: normal; 196 | letter-spacing: 1px; 197 | cursor: pointer; 198 | text-transform: uppercase; 199 | } 200 | 201 | .menu-item { 202 | display: flex; 203 | flex-direction: column; 204 | justify-content: space-evenly; 205 | height: 10rem; 206 | align-items: center; 207 | cursor: pointer; 208 | padding: 2rem 0; 209 | position: relative; 210 | 211 | .color-name { 212 | font-size: 1.5rem; 213 | text-align: center; 214 | margin: 0; 215 | } 216 | 217 | .menu-item-overlay { 218 | position: absolute; 219 | top: 0; 220 | left: 0; 221 | height: 100%; 222 | width: 100%; 223 | display: flex; 224 | align-items: stretch; 225 | 226 | .panel { 227 | flex: 1; 228 | font-weight: 300; 229 | opacity: 0; 230 | transition: 120ms opacity ease-out; 231 | display: flex; 232 | align-items: flex-start; 233 | 234 | .panel-text { 235 | display: inline-block; 236 | background: colors.$color; 237 | color: colors.$high-contrast; 238 | padding: 0.375rem 0.75rem; 239 | font-size: 1.2rem; 240 | border-bottom: 1px solid colors.$high-contrast; 241 | } 242 | 243 | &.left { 244 | justify-content: flex-start; 245 | 246 | .panel-text { 247 | border-bottom-right-radius: 6px; 248 | border-right: 1px solid colors.$high-contrast; 249 | } 250 | } 251 | 252 | &.right { 253 | justify-content: flex-end; 254 | .panel-text { 255 | border-bottom-left-radius: 6px; 256 | border-left: 1px solid colors.$high-contrast; 257 | } 258 | } 259 | 260 | &:hover { 261 | opacity: 1; 262 | } 263 | } 264 | } 265 | } 266 | } 267 | } 268 | 269 | .footer-left, 270 | .footer-right { 271 | position: absolute; 272 | bottom: 6px; 273 | font-size: 1.2rem; 274 | line-height: 1.2rem; 275 | } 276 | 277 | .footer-right { 278 | right: 6px; 279 | } 280 | 281 | .footer-left { 282 | left: 6px; 283 | } 284 | 285 | .footer-row { 286 | height: 6rem; 287 | position: absolute; 288 | bottom: 0; 289 | width: 100%; 290 | display: flex; 291 | align-items: center; 292 | justify-content: center; 293 | 294 | .icon { 295 | font-size: 2.5rem; 296 | color: colors.$high-contrast; 297 | cursor: pointer; 298 | fill: colors.$high-contrast; 299 | margin: 1rem; 300 | 301 | &:hover { 302 | color: colors.$contrast; 303 | fill: colors.$contrast; 304 | } 305 | 306 | &.kofi-icon { 307 | margin-bottom: 0.5rem; 308 | } 309 | } 310 | } 311 | 312 | .help-menu-content { 313 | color: colors.$high-contrast; 314 | padding: 0 1.25rem 1rem 1.25rem; 315 | 316 | h4 { 317 | font-size: 1.8rem; 318 | margin: 2rem 0 0.5rem 0; 319 | } 320 | 321 | h5 { 322 | font-size: 1.5rem; 323 | margin: 1.2rem 0 0.25rem 0; 324 | display: flex; 325 | align-items: center; 326 | cursor: pointer; 327 | } 328 | 329 | p { 330 | margin: 0 0 1rem 0; 331 | font-size: 1.4rem; 332 | } 333 | 334 | .feature-container { 335 | height: auto; 336 | overflow: hidden; 337 | 338 | &.closed { 339 | height: 0; 340 | } 341 | } 342 | 343 | a { 344 | color: colors.$high-contrast; 345 | } 346 | 347 | ul { 348 | padding-left: 1.4rem; 349 | } 350 | 351 | li { 352 | font-size: 1.2rem; 353 | } 354 | 355 | code { 356 | font-size: 1.3rem; 357 | background-color: colors.$opposite-contrast; 358 | padding: 0.1rem 0.3rem; 359 | } 360 | 361 | .plus-button { 362 | margin-right: 1rem; 363 | } 364 | } 365 | -------------------------------------------------------------------------------- /src/components/sidebar/help-menu.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import PlusButton from 'components/plus-button'; 3 | 4 | interface AccordianStates { 5 | colorParser: boolean; 6 | copyToClipboard: boolean; 7 | colorNames: boolean; 8 | randomColors: boolean; 9 | colorHistory: boolean; 10 | offlineCapability: boolean; 11 | splitView: boolean; 12 | } 13 | 14 | type AccordianID = keyof AccordianStates; 15 | 16 | const HelpMenu = () => { 17 | const [accordianStates, updateAccordianStates] = useState({ 18 | colorParser: false, 19 | copyToClipboard: false, 20 | colorNames: false, 21 | randomColors: false, 22 | colorHistory: false, 23 | offlineCapability: false, 24 | splitView: false, 25 | }); 26 | 27 | const toggleAccordianState = (accordianID: AccordianID) => { 28 | updateAccordianStates({ 29 | ...accordianStates, 30 | [accordianID]: !accordianStates[accordianID], 31 | }); 32 | }; 33 | 34 | return ( 35 |

36 |

Welcome to Shade Generator!

37 |

38 | Shade generator is a project that started as a codepen a couple years 39 | ago. The idea behind it was simple, when you overlap a color with a 40 | transparent white or black section, you end up with a tint or shade of 41 | that color. As many people do in web development, I would often use this 42 | trick to create a contrasting color effect for button hovers or element 43 | borders. This got annoying because in order to make the effect work, I 44 | would need two elements on the screen for the overlap where I often only 45 | needed one. So, I decided to make a little tool to help me find the 46 | color codes for this resulting shade by giving me a variety of 47 | overlapping icons with the color I was plannibg on using as the 48 | background. However it was still not the most convenient because I had 49 | to use a chrome plugin called ColorZilla to get the actual code of the 50 | resulting color, however I could not think of a better way. Finally, 51 | after using this tool hundreds of times I finally thought, there must be 52 | some way to calculate this resulting color! 53 |

54 |

55 | After a quick google search, I found{' '} 56 | 61 | this link 62 | 63 | . I immediately realized calculating the colors I wanted was possible 64 | with this very simple formula... 65 |

66 |

to be continued...

67 |

Features

68 |

69 | Throughout the process of making this website, I slowly started adding 70 | in some cool additional features. Some served a purpose, some just for 71 | fun. 72 |

73 |

{ 76 | toggleAccordianState('colorParser'); 77 | }} 78 | > 79 | 80 | Color Parser 81 |

82 |

87 |

88 | One of the first things I added was the NPM package{' '} 89 | 94 | parse-color 95 | 96 | . It takes a string and parses it for its color values in many 97 | different formats. It can parse colors from hex values, rgb values, 98 | css named colors, and cymk formats. The result is an object that has 99 | the following components: 100 |

101 |

rgb - an array of [ red, green, blue ]
hsl - an array of [ hue, saturation, luminosity ]
hsv - an array of [ hue, saturation, value ]
cmyk - an array of [ cyan, magenta, yellow, blac(k) ]
keyword - the name of the color, if known
hex - the hex rgb string #rrggbb
rgba - rgb plus an alpha value
hsla - hsl plus an alpha value
hsva - hsv plus an alpha value
cmyka - cmyk plus an alpha value

113 |

114 | This was useful, not only to interpret input from the user but also 115 | for providing hex and rgb values, both of which are important to this 116 | app's functionality. After scrubbing the user input before 117 | passing it to this function, it does a great job of matching 118 | everything you'd expect it to! 119 |

120 |

121 |

{ 124 | toggleAccordianState('copyToClipboard'); 125 | }} 126 | > 127 | 128 | Copy to Clipboard 129 |

130 |

135 |

136 | The next main thing I added was the option to click to copy either the 137 | hex code or the rgb code to your clipboard. The first two things I 138 | tried were document.execCommand("copy") and{' '} 139 | navigator.clipboard.write(). Both of these options worked 140 | but I ran into issued with them working on all devices. I soon 141 | stumbled upon a nice small NPM package called{' '} 142 | 147 | clipboard-polyfill 148 | 149 | . It is nice and compact and gave me a convenient way to ensure 150 | copying would work on all devices and browser the clipboard is 151 | accessible in! 152 |

153 |

154 |

{ 157 | toggleAccordianState('colorNames'); 158 | }} 159 | > 160 | 161 | Color Names 162 |

163 |

168 |

169 | Now that the basic features were in place, it was time to have some 170 | fun! I decided that the page was a little too plain so I thought I 171 | would add some names for the colors. The first library I added for 172 | this is called{' '} 173 | 178 | color-namer 179 | 180 | . It appealed to me because of the fact that it offered a combination 181 | of multiple lists of colors including CSS colors, X11, Pantone, and 182 | NTC. 183 |

184 |

185 | After running into some problems with this package (I can't quite 186 | remember what) I decided to keep looking around. Somehow I missed the 187 | amazing package{' '} 188 | 193 | color-name-list 194 | 195 | . It contains a whopping 18,000+ (and growing) color list which 196 | combines over 15 different sources of color names along with thousands 197 | of user submission. While this list is massive, it still only contains 198 | 0.11% of the total possible RGB combinations so in order to match all 199 | colors so in order to match it to an input color, I used the package{' '} 200 | 205 | nearest-color 206 | 207 | . This matches the color the user enters with the closest color from 208 | the list, and due to the magnitude of color-name-list, it's 209 | usually pretty damn close! 210 |

211 |

212 |

{ 215 | toggleAccordianState('randomColors'); 216 | }} 217 | > 218 | 219 | Random Colors 220 |

221 |

226 |

227 | So now I have the main functionality I want and a little pizzazz, I 228 | realized I needed a faster way to test the app. So I decided the best 229 | way would be to add a random color generator. This may seem like it 230 | should have been an obvious thing to make from the start but it took 231 | me a while to realize it (I know, sometimes I'm thick). It took 232 | me all of 5 minutes to add it and get it going and it made a world of 233 | difference. Now when I'm looking for colors for a new website, 234 | I'll just hit random until something stands out to me. And I 235 | still get a kick out some of these names. 236 |

237 |

238 |

{ 241 | toggleAccordianState('colorHistory'); 242 | }} 243 | > 244 | 245 | Color History 246 |

247 |

252 |

253 | This was a feature that I added more for the experience than an it 254 | actually providing much value. I had been wanting to mess around with{' '} 255 | 260 | Firebase Firestore 261 | 262 | , Google's real time noSQL database, for a while and this was the 263 | perfect excuse. I added a simple collection for storing the globally 264 | most recent colors that anyone has submitted, updating their timestamp 265 | every time it is used. I could not have been more happy with how easy 266 | it was to set up. It was so fast to set up in fact that I had the 267 | history sidebar up and running in one evening and soon after I added a 268 | section for the most used colors as well. If you are ever interested 269 | in quickly bootstrapping a project that requires storing data, I 270 | highly recommend giving Firebase a shot 271 |

272 |

273 |

{ 276 | toggleAccordianState('offlineCapability'); 277 | }} 278 | > 279 | 280 | Offline Capability 281 |

282 |

287 |

work in progress...

288 |

289 |

{ 292 | toggleAccordianState('splitView'); 293 | }} 294 | > 295 | 296 | Split Screen 297 |

298 |

303 |