Home Reference Source

src/utils/Colors.js

//All colors in CSS
const cssColors = [
    'Red',
    'Blue',
    'Yellow',
    'Aqua',
    'Aquamarine',
    'Azure',
    'Beige',
    'Bisque',
    'Black',
    'BlueViolet',
    'Brown',
    'BurlyWood',
    'CadetBlue',
    'Chartreuse',
    'Chocolate',
    'Coral',
    'CornflowerBlue',
    'Crimson',
    'Cyan',
    'DarkBlue',
    'DarkCyan',
    'DarkGoldenRod',
    'DarkGrey',
    'DarkGreen',
    'DarkKhaki',
    'DarkMagenta',
    'DarkOliveGreen',
    'DarkOrange',
    'DarkOrchid',
    'DarkRed',
    'DarkSalmon',
    'DarkSeaGreen',
    'DarkSlateBlue',
    'DarkSlateGray',
    'DarkTurquoise',
    'DarkViolet',
    'DeepPink',
    'DeepSkyBlue',
    'DimGray',
    'DodgerBlue',
    'FireBrick',
    'FloralWhite',
    'ForestGreen',
    'Fuchsia',
    'GhostWhite',
    'Gold',
    'GoldenRod',
    'Gray',
    'Green',
    'GreenYellow',
    'HotPink',
    'IndianRed',
    'Indigo',
    'Khaki',
    'Lavender',
    'LawnGreen',
    'LemonChiffon',
    'LightBlue',
    'LightCoral',
    'LightCyan',
    'LightGoldenRodYellow',
    'LightGreen',
    'LightPink',
    'LightSalmon',
    'LightSeaGreen',
    'LightSkyBlue',
    'LightSlateGrey',
    'LightSteelBlue',
    'LightYellow',
    'Lime',
    'LimeGreen',
    'Linen',
    'Magenta',
    'Maroon',
    'MediumAquaMarine',
    'MediumBlue',
    'MediumOrchid',
    'MediumPurple',
    'MediumSeaGreen',
    'MediumSlateBlue',
    'MediumSpringGreen',
    'MediumTurquoise',
    'MediumVioletRed',
    'MidnightBlue',
    'MistyRose',
    'Moccasin',
    'Navy',
    'OldLace',
    'Olive',
    'OliveDrab',
    'Orange',
    'OrangeRed',
    'Orchid',
    'PaleGoldenRod',
    'PaleGreen',
    'PaleTurquoise',
    'PaleVioletRed',
    'PapayaWhip',
    'PeachPuff',
    'Peru',
    'Pink',
    'Plum',
    'PowderBlue',
    'Purple',
    'RebeccaPurple',
    'RosyBrown',
    'RoyalBlue',
    'SaddleBrown',
    'Salmon',
    'SandyBrown',
    'SeaGreen',
    'Sienna',
    'Silver',
    'SkyBlue',
    'SlateBlue',
    'SlateGray',
    'Snow',
    'SpringGreen',
    'SteelBlue',
    'Tan',
    'Teal',
    'Thistle',
    'Tomato',
    'Turquoise',
    'Violet',
    'Wheat',
    'YellowGreen',
];
//Complete color palette
const colorPalette = {
    white: '#FFFFFF',
    black: '#000000',
    almostWhite: '#FBFCFB',
    blanchedAlmond: '#FFEBCD',
    lightCyan: '#D7F7FE',
    turquoiseBlue: '#68E1FB', // turquoise
    pacificBlue: '#05A3C7',
    lavenderBlue: '#C5DBFC', // blue
    azure: '#297EFF',
    sapphire: '#094DB3',
    lavender: '#EDDEF7', // purple
    brightLavender: '#C08CE3',
    purple: '#7228A4',
    charmPink: '#EC83AD', // pink
    dogwoodRose: '#C91E63',
    burgondy: '#7D0032',
    lightGreen: '#F0FAC7', // green
    mindaro: '#DDF37C',
    vividLimeGreen: '#ABCD13',
    mintGreen: '#C3F99F',
    harlequinGreen: '#59CC0C',
    slimyGreen: '#3B8609',
    carrotOrange: '#EB9617', // orange
    mustardBrown: '#CF820E',
    softOrange: '#F3B353',
    deepChampagne: '#F8D5A0',
    mistyRose: '#F8D2C9', // red
    darkSalmon: '#EE9581',
    darkRed: '#BD381A',
    scarlet: '#F0411A',
    atomicTangerine: '#FF8B5E',
    piggyPink: '#F9DCE8',
    veryLightGray: '#F3F3F3', // gray
    platinum: '#EBEAEB',
    lightGray: '#CECCCF',
    rocketMetallic: '#7C777E',
};

//Important colors
const colors = {
    backgroundDefault: colorPalette.blanchedAlmond,
    textDefault: colorPalette.black,
    textConfirmation: 'green',
    textError: 'red',
    shadowButton: colorPalette.black,
    overlay: 'rgba(246,246,246,0.8)',
    // diaryCover: '#C96561',
};

/**
 * Function to convert CSS colors (first letter capitalized) to React colors (all lowercase)
 * @returns {[string]} All CSS colors with names understood by React
 */
function getColors() {
    const colors = [];
    let i = 0;
    cssColors.forEach(
        color => colors.push({id: i++, name: color.toLowerCase()}), //Convert
    );
    return colors;
}
export {getColors, colors, colorPalette};