Scribd Logo
Upload

Welcome to Scribd!

  • 19 views

    Color Palettes

    Uploaded by

    Alex Halcu
    The document defines color values for CSS and SCSS in hexadecimal, HSL, RGB, and gradient formats. It includes 5 colors in each section with their hexadecimal, HSL, and RGB representations. It also defines 8 linear and 1 radial gradient variables using the 5 colors.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Color Palettes

    Uploaded by

    Alex Halcu
    19 views2 pages
    The document defines color values for CSS and SCSS in hexadecimal, HSL, RGB, and gradient formats. It includes 5 colors in each section with their hexadecimal, HSL, and RGB representations. It also defines 8 linear and 1 radial gradient variables using the 5 colors.

    Original Title

    color palettes

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document defines color values for CSS and SCSS in hexadecimal, HSL, RGB, and gradient formats. It includes 5 colors in each section with their hexadecimal, HSL, and RGB representations. It also defines 8 linear and 1 radial gradient variables using the 5 colors.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    19 views2 pages

    Color Palettes

    Uploaded by

    Alex Halcu
    The document defines color values for CSS and SCSS in hexadecimal, HSL, RGB, and gradient formats. It includes 5 colors in each section with their hexadecimal, HSL, and RGB representations. It also defines 8 linear and 1 radial gradient variables using the 5 colors.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    You are on page 1of 2

    08000 052F5F 005377 D5C67A F1A208

    #008000, #644536, #4f359b, #aff9c9, #eee0cb


    ------------------------------------------------------------
    /* CSS HEX */
    --midnight-green-eagle-green: #0e3b43ff;
    --myrtle-green: #357266ff;
    --cambridge-blue: #a3bbadff;
    --field-drab: #65532fff;
    --olive-drab-7: #312509ff;

    /* CSS HSL */
    --midnight-green-eagle-green: hsla(189, 65%, 16%, 1);
    --myrtle-green: hsla(168, 37%, 33%, 1);
    --cambridge-blue: hsla(145, 15%, 69%, 1);
    --field-drab: hsla(40, 36%, 29%, 1);
    --olive-drab-7: hsla(42, 69%, 11%, 1);

    /* SCSS HEX */
    $midnight-green-eagle-green: #0e3b43ff;
    $myrtle-green: #357266ff;
    $cambridge-blue: #a3bbadff;
    $field-drab: #65532fff;
    $olive-drab-7: #312509ff;

    /* SCSS HSL */
    $midnight-green-eagle-green: hsla(189, 65%, 16%, 1);
    $myrtle-green: hsla(168, 37%, 33%, 1);
    $cambridge-blue: hsla(145, 15%, 69%, 1);
    $field-drab: hsla(40, 36%, 29%, 1);
    $olive-drab-7: hsla(42, 69%, 11%, 1);

    /* SCSS RGB */
    $midnight-green-eagle-green: rgba(14, 59, 67, 1);
    $myrtle-green: rgba(53, 114, 102, 1);
    $cambridge-blue: rgba(163, 187, 173, 1);
    $field-drab: rgba(101, 83, 47, 1);
    $olive-drab-7: rgba(49, 37, 9, 1);

    /* SCSS Gradient */
    $gradient-top: linear-gradient(0deg, #0e3b43ff, #357266ff, #a3bbadff, #65532fff,
    #312509ff);
    $gradient-right: linear-gradient(90deg, #0e3b43ff, #357266ff, #a3bbadff, #65532fff,
    #312509ff);
    $gradient-bottom: linear-gradient(180deg, #0e3b43ff, #357266ff, #a3bbadff,
    #65532fff, #312509ff);
    $gradient-left: linear-gradient(270deg, #0e3b43ff, #357266ff, #a3bbadff, #65532fff,
    #312509ff);
    $gradient-top-right: linear-gradient(45deg, #0e3b43ff, #357266ff, #a3bbadff,
    #65532fff, #312509ff);
    $gradient-bottom-right: linear-gradient(135deg, #0e3b43ff, #357266ff, #a3bbadff,
    #65532fff, #312509ff);
    $gradient-top-left: linear-gradient(225deg, #0e3b43ff, #357266ff, #a3bbadff,
    #65532fff, #312509ff);
    $gradient-bottom-left: linear-gradient(315deg, #0e3b43ff, #357266ff, #a3bbadff,
    #65532fff, #312509ff);
    $gradient-radial: radial-gradient(#0e3b43ff, #357266ff, #a3bbadff, #65532fff,
    #312509ff);
    ------------------------------------
    ----------------------------------------------
    /* CSS HEX */
    --midnight-green-eagle-green: #114b5fff;
    --illuminating-emerald: #1a936fff;
    --granny-smith-apple: #88d498ff;
    --tea-green: #c6dabfff;
    --eggshell: #f3e9d2ff;

    /* CSS HSL */
    --midnight-green-eagle-green: hsla(195, 70%, 22%, 1);
    --illuminating-emerald: hsla(162, 70%, 34%, 1);
    --granny-smith-apple: hsla(133, 47%, 68%, 1);
    --tea-green: hsla(104, 27%, 80%, 1);
    --eggshell: hsla(42, 58%, 89%, 1);

    /* SCSS HEX */
    $midnight-green-eagle-green: #114b5fff;
    $illuminating-emerald: #1a936fff;
    $granny-smith-apple: #88d498ff;
    $tea-green: #c6dabfff;
    $eggshell: #f3e9d2ff;

    /* SCSS HSL */
    $midnight-green-eagle-green: hsla(195, 70%, 22%, 1);
    $illuminating-emerald: hsla(162, 70%, 34%, 1);
    $granny-smith-apple: hsla(133, 47%, 68%, 1);
    $tea-green: hsla(104, 27%, 80%, 1);
    $eggshell: hsla(42, 58%, 89%, 1);

    /* SCSS RGB */
    $midnight-green-eagle-green: rgba(17, 75, 95, 1);
    $illuminating-emerald: rgba(26, 147, 111, 1);
    $granny-smith-apple: rgba(136, 212, 152, 1);
    $tea-green: rgba(198, 218, 191, 1);
    $eggshell: rgba(243, 233, 210, 1);

    /* SCSS Gradient */
    $gradient-top: linear-gradient(0deg, #114b5fff, #1a936fff, #88d498ff, #c6dabfff,
    #f3e9d2ff);
    $gradient-right: linear-gradient(90deg, #114b5fff, #1a936fff, #88d498ff, #c6dabfff,
    #f3e9d2ff);
    $gradient-bottom: linear-gradient(180deg, #114b5fff, #1a936fff, #88d498ff,
    #c6dabfff, #f3e9d2ff);
    $gradient-left: linear-gradient(270deg, #114b5fff, #1a936fff, #88d498ff, #c6dabfff,
    #f3e9d2ff);
    $gradient-top-right: linear-gradient(45deg, #114b5fff, #1a936fff, #88d498ff,
    #c6dabfff, #f3e9d2ff);
    $gradient-bottom-right: linear-gradient(135deg, #114b5fff, #1a936fff, #88d498ff,
    #c6dabfff, #f3e9d2ff);
    $gradient-top-left: linear-gradient(225deg, #114b5fff, #1a936fff, #88d498ff,
    #c6dabfff, #f3e9d2ff);
    $gradient-bottom-left: linear-gradient(315deg, #114b5fff, #1a936fff, #88d498ff,
    #c6dabfff, #f3e9d2ff);
    $gradient-radial: radial-gradient(#114b5fff, #1a936fff, #88d498ff, #c6dabfff,
    #f3e9d2ff);

    You might also like