├── static ├── .gitkeep └── images │ ├── uigradients.jpg │ ├── favicon-16x16.png │ └── favicon-32x32.png ├── .eslintignore ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── src ├── stylesheets │ ├── modules │ │ ├── _social.scss │ │ ├── _codeblock.scss │ │ ├── _loader.scss │ │ ├── _shortlist.scss │ │ ├── _header.scss │ │ ├── _nav.scss │ │ ├── _display.scss │ │ ├── _modal.scss │ │ ├── _hex.scss │ │ ├── _palette.scss │ │ └── _actionbar.scss │ ├── components │ │ ├── _burger.scss │ │ ├── _menu.scss │ │ ├── _spinner.scss │ │ ├── _buttons.scss │ │ └── _tooltips.scss │ ├── base │ │ ├── _breakpoints.scss │ │ ├── _layout.scss │ │ └── _animations.scss │ ├── helpers │ │ ├── _utils.scss │ │ └── _mixin.scss │ └── app.scss ├── assets │ ├── arrow.svg │ ├── plus.svg │ ├── leftchev.svg │ ├── rightchev.svg │ ├── download.svg │ ├── code.svg │ ├── add.svg │ ├── help.svg │ ├── rotate.svg │ ├── facebook.svg │ ├── twitter.svg │ ├── skillshare.svg │ ├── github.svg │ ├── logo.svg │ └── logo2.svg ├── components │ ├── Modal.vue │ ├── Palette.vue │ ├── modals │ │ ├── GradientModal.vue │ │ └── CodeModal.vue │ ├── Swatch.vue │ ├── Topbar.vue │ ├── Actionbar.vue │ ├── Display.vue │ ├── List.vue │ └── Preload.vue ├── services │ ├── colorDetector.js │ ├── faviconUpdater.js │ ├── gradientDownloader.js │ └── canvasHelpers.js ├── main.js └── App.vue ├── test ├── unit │ ├── .eslintrc │ ├── specs │ │ ├── Topbar.spec.js │ │ ├── Gradients.spec.js │ │ ├── Swatch.spec.js │ │ ├── Display.spec.js │ │ └── Palette.spec.js │ ├── index.js │ └── karma.conf.js └── e2e │ ├── custom-assertions │ └── elementCount.js │ ├── runner.js │ ├── nightwatch.conf.js │ └── specs │ └── app.js ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── .babelrc ├── .travis.yml ├── .eslintrc.js ├── LICENSE.md ├── index.html ├── README.md ├── package.json └── gradients.json /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/stylesheets/modules/_social.scss: -------------------------------------------------------------------------------- 1 | .social { 2 | margin: 0; 3 | padding: 0; 4 | } -------------------------------------------------------------------------------- /static/images/uigradients.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ghosh/uiGradients/HEAD/static/images/uigradients.jpg -------------------------------------------------------------------------------- /static/images/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ghosh/uiGradients/HEAD/static/images/favicon-16x16.png -------------------------------------------------------------------------------- /static/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ghosh/uiGradients/HEAD/static/images/favicon-32x32.png -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /src/assets/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/assets/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/stylesheets/components/_burger.scss: -------------------------------------------------------------------------------- 1 | .burger { 2 | display: flex; 3 | align-items: center; 4 | span { margin-right: 5px } 5 | text-decoration: none; 6 | color: #373737; 7 | font-size: 14px; 8 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .grunt/ 3 | .gulp/ 4 | node_modules/ 5 | dist/ 6 | npm-debug.log 7 | yarn-error.log 8 | test/unit/coverage 9 | test/e2e/reports 10 | selenium-debug.log 11 | npm-debug.log 12 | .env 13 | .next 14 | -------------------------------------------------------------------------------- /src/assets/leftchev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/rightchev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserlist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/stylesheets/base/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Used by the respond-to() mixin 3 | * @type map 4 | */ 5 | $breakpoints: ( 6 | 'small' : 620px, 7 | 'medium' : 700px, 8 | 'sponsor' : 840px, 9 | 'large' : 1096px 10 | ); -------------------------------------------------------------------------------- /src/stylesheets/base/_layout.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background-color: #fff; 5 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, Arial, sans-serif; 6 | color: #2c3e50; 7 | } -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "presets": ["env", "stage-2"], 11 | "plugins": [ "istanbul" ] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/stylesheets/components/_menu.scss: -------------------------------------------------------------------------------- 1 | @import '../helpers/mixin'; 2 | 3 | .menu { 4 | padding-right: 0; 5 | 6 | &__icon { 7 | @include burger(20px, 2px, 3px, #333, 13px, 0.25s); 8 | } 9 | &.is-active { 10 | .menu__icon { 11 | @include burger-to-cross(); 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /src/stylesheets/modules/_codeblock.scss: -------------------------------------------------------------------------------- 1 | .codeblock { 2 | overflow: auto; 3 | text-align: left; 4 | font-family: "Source Code Pro", Consolas, monospace; 5 | color: #476da5; 6 | 7 | &__comment { color: #ababab !important; } 8 | &__property { color: #2aa198 !important; } 9 | &__spec { color: #d33682 !important; } 10 | } -------------------------------------------------------------------------------- /src/assets/download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /test/unit/specs/Topbar.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from 'avoriaz'; 2 | import Topbar from '@/components/Topbar'; 3 | 4 | const wrapper = mount(Topbar); 5 | 6 | describe('Topbar.vue', () => { 7 | it('renders child elements correctly', () => { 8 | expect(wrapper.contains('.header__logo')).to.equal(true); 9 | expect(wrapper.contains('.header__social')).to.equal(true); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/assets/code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: trusty 3 | language: node_js 4 | node_js: 5 | - "8" 6 | before_install: 7 | - export CHROME_BIN=/usr/bin/google-chrome 8 | - export DISPLAY=:99.0 9 | - sh -e /etc/init.d/xvfb start 10 | - sudo apt-get update 11 | - sudo apt-get install -y libappindicator1 fonts-liberation 12 | - wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 13 | - sudo dpkg -i google-chrome*.deb 14 | script: 15 | - jdk_switcher use oraclejdk8 -------------------------------------------------------------------------------- /src/components/Modal.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 23 | -------------------------------------------------------------------------------- /src/stylesheets/base/_animations.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Used to show copied status on hex code 3 | */ 4 | @keyframes fadeOutUp { 5 | from { opacity: 1; } 6 | to { opacity: 0; transform: translate3d(0, -100%, 0); } 7 | } 8 | .fadeup-leave { opacity: 1; } 9 | .fadeup-leave-active { animation: fadeOutUp .5s; } 10 | .fadeup-leave-to { opacity: 0; } 11 | 12 | 13 | /** 14 | * Used to fade-out the preloader 15 | */ 16 | .fade-enter-active, .fade-leave-active { transition: opacity .5s } 17 | .fade-enter, .fade-leave-to { opacity: 0 } -------------------------------------------------------------------------------- /src/assets/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/stylesheets/components/_spinner.scss: -------------------------------------------------------------------------------- 1 | .spinner, 2 | .spinner:after { 3 | border-radius: 50%; 4 | width: 30px; 5 | height: 30px; 6 | } 7 | .spinner { 8 | font-size: 10px; 9 | position: relative; 10 | text-indent: -9999em; 11 | border-top: 5px solid rgba(0, 0, 0, 0.1); 12 | border-right: 5px solid rgba(0, 0, 0, 0.1); 13 | border-bottom: 5px solid rgba(0, 0, 0, 0.1); 14 | border-left: 5px solid #ff512f; 15 | transform: translateZ(0); 16 | animation: spin 1.1s infinite linear; 17 | } 18 | @keyframes spin { 19 | 0% { transform: rotate(0deg); } 20 | 100% { transform: rotate(360deg); } 21 | } -------------------------------------------------------------------------------- /src/services/colorDetector.js: -------------------------------------------------------------------------------- 1 | import hexToHsl from 'hex-to-hsl'; 2 | 3 | export default function (hexColor) { 4 | const [hue, sat, lgt] = hexToHsl(hexColor); 5 | 6 | if ((lgt / 100) < 0.2) return 'Blacks'; 7 | if ((lgt / 100) > 0.85) return 'Whites'; 8 | 9 | if ((sat / 100) < 0.20) return 'Grays'; 10 | 11 | if (hue < 30) return 'Reds'; 12 | if (hue < 60) return 'Oranges'; 13 | if (hue < 90) return 'Yellows'; 14 | if (hue < 150) return 'Greens'; 15 | if (hue < 210) return 'Cyans'; 16 | if (hue < 270) return 'Blues'; 17 | if (hue < 330) return 'Magentas'; 18 | 19 | return 'Reds'; 20 | } 21 | -------------------------------------------------------------------------------- /src/assets/help.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | Vue.config.productionTip = false; 4 | 5 | // Polyfill fn.bind() for PhantomJS 6 | /* eslint-disable no-extend-native */ 7 | Function.prototype.bind = require('function-bind'); 8 | 9 | // require all test files (files that ends with .spec.js) 10 | const testsContext = require.context('./specs', true, /\.spec$/); 11 | testsContext.keys().forEach(testsContext); 12 | 13 | // require all src files except main.js for coverage. 14 | // you can also change this to match only the subset of files that 15 | // you want coverage for. 16 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/); 17 | srcContext.keys().forEach(srcContext); 18 | -------------------------------------------------------------------------------- /test/unit/specs/Gradients.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from 'avoriaz'; 2 | import Display from '@/components/Display'; 3 | 4 | const wrapper = mount(Display, { 5 | propsData: { 6 | direction: 'to left', 7 | gradient: { 8 | colors: ['#1FA2FF', '#21DCF6', '#A6FFCB'], 9 | name: 'Stripe', 10 | }, 11 | }, 12 | }); 13 | 14 | describe('Display.vue', () => { 15 | it('It renders element correctly', () => { 16 | expect(wrapper.is('.display')).to.equal(true); 17 | }); 18 | 19 | it('should have a gradient as background style', () => { 20 | expect(wrapper.hasStyle('background', 'linear-gradient(to left, #1FA2FF,#21DCF6,#A6FFCB)')) 21 | .to.equal(true); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/components/Palette.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 27 | -------------------------------------------------------------------------------- /src/assets/rotate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /test/unit/specs/Swatch.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from 'avoriaz'; 2 | import Swatch from '@/components/Swatch'; 3 | 4 | const wrapper = mount(Swatch, { 5 | propsData: { 6 | color: '#2D2D2D', 7 | }, 8 | }); 9 | 10 | describe('Swatch.vue', () => { 11 | it('should render a color box', () => { 12 | expect(wrapper.contains('.hex__block')) 13 | .to.equal(true); 14 | }); 15 | 16 | it('should color the swatch box correctly', () => { 17 | const div = wrapper.find('.hex__name')[0]; 18 | expect(div.text()) 19 | .to.equal('#2d2d2d'); 20 | }); 21 | 22 | it('should make the hex value lowercase', () => { 23 | const div = wrapper.find('.hex__name')[0]; 24 | expect(div.text()) 25 | .to.equal('#2d2d2d'.toLowerCase()); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /src/assets/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/modals/GradientModal.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 31 | -------------------------------------------------------------------------------- /src/stylesheets/modules/_loader.scss: -------------------------------------------------------------------------------- 1 | @import '../helpers/mixin'; 2 | 3 | .loader { 4 | position: absolute; 5 | z-index: 10; 6 | background-color: #fff; 7 | width: 100%; 8 | height: 100%; 9 | top: 0; 10 | left: 0; 11 | bottom: 0; 12 | right: 0; 13 | justify-content: center; 14 | align-items: center; 15 | display: none; 16 | 17 | @include respond-to(small) { 18 | display: flex; 19 | } 20 | 21 | &__content { 22 | text-align: center; 23 | max-width: 400px; 24 | } 25 | 26 | &__logo { 27 | width: 220px; 28 | height: 60px; 29 | } 30 | 31 | &__tip { 32 | @include font-smoothing(); 33 | font-size: 19px; 34 | line-height: 1.4; 35 | margin-top: 30px; 36 | margin-bottom: 36px; 37 | color: #616161; 38 | } 39 | 40 | &__spinner { 41 | display: inline-block; 42 | } 43 | } -------------------------------------------------------------------------------- /src/stylesheets/helpers/_utils.scss: -------------------------------------------------------------------------------- 1 | .mono { font-family: monospace; } 2 | 3 | .tal { text-align: left; } 4 | .tar { text-align: right; } 5 | .tac { text-align: center; } 6 | 7 | .ml10 { margin-left: 10px; } 8 | 9 | .noselect { 10 | -webkit-touch-callout: none; /* iOS Safari */ 11 | -webkit-user-select: none; /* Safari */ 12 | -khtml-user-select: none; /* Konqueror HTML */ 13 | -moz-user-select: none; /* Firefox */ 14 | -ms-user-select: none; /* Internet Explorer/Edge */ 15 | user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ 16 | } 17 | 18 | .hide-text { 19 | margin: -1px; 20 | padding: 0; 21 | width: 1px; 22 | height: 1px; 23 | overflow: hidden; 24 | clip: rect(0 0 0 0); 25 | clip: rect(0, 0, 0, 0); 26 | position: absolute; 27 | } 28 | 29 | .bg-red { background-color: red; } -------------------------------------------------------------------------------- /src/stylesheets/modules/_shortlist.scss: -------------------------------------------------------------------------------- 1 | .shortlist { 2 | list-style-type: none; 3 | margin: 0; 4 | padding: 0; 5 | display: flex; 6 | justify-content: space-between; 7 | align-items: center; 8 | background-color: #000; 9 | height: 70px; 10 | padding: 0 20px; 11 | 12 | &__item { 13 | height: 40px; 14 | border-radius: 3px; 15 | flex-basis: 9.3%; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | box-sizing: border-box; 20 | cursor: pointer; 21 | 22 | &.active { 23 | border: solid 2px #fafafa; 24 | } 25 | } 26 | 27 | &__link { 28 | display: block; 29 | text-decoration: none; 30 | color: #fafafa; 31 | font-family: "Source Code Pro", monospace; 32 | font-size: 12px; 33 | 34 | &:hover { 35 | text-decoration: underline; 36 | } 37 | 38 | } 39 | 40 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueClipboards from 'vue-clipboards'; 3 | import VueAnalytics from 'vue-analytics'; 4 | 5 | import App from './App'; 6 | 7 | require('./stylesheets/app.scss'); 8 | 9 | Vue.use(VueClipboards); 10 | Vue.use(VueAnalytics, { 11 | id: 'UA-49604576-2', 12 | autoTracking: { 13 | exception: true, 14 | }, 15 | }); 16 | 17 | Vue.config.productionTip = false; 18 | 19 | /* eslint-disable no-new */ 20 | new Vue({ 21 | el: '#app', 22 | template: '', 23 | components: { App }, 24 | }); 25 | 26 | /* eslint-disable no-console, no-useless-escape */ 27 | console.log('uigradients.com - Beautiful color gradients for design and code'); 28 | console.log('----------------------------------------------------------------'); 29 | console.log('Have a side project you want to collab on? Get in touch!'); 30 | console.log('I am at - https://twitter.com/_ighosh'); 31 | -------------------------------------------------------------------------------- /src/services/faviconUpdater.js: -------------------------------------------------------------------------------- 1 | import Canvas from './canvasHelpers'; 2 | 3 | const isChrome = !!window.chrome && !!window.chrome.webstore; 4 | const isFirefox = typeof InstallTrigger !== 'undefined'; 5 | 6 | export default function (direction, ...colors) { 7 | if (isChrome === false && isFirefox === false) return; 8 | 9 | const canvas = document.createElement('canvas'); 10 | const ctx = canvas.getContext('2d'); 11 | const link = document.querySelector('link[rel*="icon"]'); 12 | 13 | canvas.height = 32; 14 | canvas.width = 32; // set the size 15 | 16 | const dir = Canvas.generateCoordinates(direction, canvas.height, canvas.width); 17 | const grd = ctx.createLinearGradient(...dir); 18 | 19 | ctx.fillStyle = Canvas.generateFillStyle(grd, ...colors); 20 | ctx.fillRect(0, 0, canvas.width, canvas.height); 21 | 22 | link.href = canvas.toDataURL('image/png'); // update favicon 23 | } 24 | -------------------------------------------------------------------------------- /test/unit/specs/Display.spec.js: -------------------------------------------------------------------------------- 1 | import Gradients from '../../../gradients.json'; 2 | 3 | const findDuplicatesinArrayByKeyValue = (array, propertyName) => { 4 | let seenDuplicate = false; 5 | let testObject = {}; 6 | let dupes = []; 7 | 8 | array.map((item) => { 9 | var itemPropertyName = item[propertyName]; 10 | if (itemPropertyName in testObject) { 11 | dupes.push(itemPropertyName); 12 | testObject[itemPropertyName].duplicate = true; 13 | item.duplicate = true; 14 | seenDuplicate = true; 15 | } 16 | else { 17 | testObject[itemPropertyName] = item; 18 | delete item.duplicate; 19 | } 20 | }) 21 | 22 | return seenDuplicate; 23 | } 24 | 25 | 26 | describe('Duplicate gradients', () => { 27 | it('Has no duplicate gradient names', () => { 28 | const dupes = findDuplicatesinArrayByKeyValue(Gradients, 'name'); 29 | expect(dupes).to.equal(false); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count; 11 | this.expected = count; 12 | this.pass = function (val) { 13 | return val === this.expected; 14 | } 15 | this.value = function (res) { 16 | return res.value; 17 | } 18 | this.command = function (cb) { 19 | var self = this; 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length; 22 | }, [selector], function (res) { 23 | cb.call(self, res); 24 | }); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/stylesheets/modules/_header.scss: -------------------------------------------------------------------------------- 1 | @import '../helpers/mixin'; 2 | 3 | .header { 4 | background-color: #FFF; 5 | border-bottom: solid 1px #F3F3F3; 6 | height: 50px; 7 | padding-left: 20px; 8 | padding-right: 20px; 9 | display: flex; 10 | align-items: center; 11 | box-sizing: border-box; 12 | z-index: 4; 13 | position: relative; 14 | justify-content: center; 15 | @include respond-to(small) { 16 | justify-content: space-between; 17 | } 18 | 19 | &__branding { 20 | display: flex; 21 | align-items: center; 22 | } 23 | 24 | &__logo { 25 | width: 130px; 26 | height: 30px; 27 | margin-top: -4px; 28 | } 29 | 30 | &__social { 31 | list-style-type: none; 32 | display: none; 33 | @include respond-to(small) { 34 | display: flex; 35 | } 36 | } 37 | 38 | &__github { 39 | width: 30px; 40 | height: 30px; 41 | fill: #000; 42 | display: none; 43 | 44 | @include respond-to(medium) { 45 | display: block; 46 | } 47 | 48 | } 49 | } -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true, 9 | }, 10 | extends: 'airbnb-base', 11 | // required to lint *.vue files 12 | plugins: [ 13 | 'html', 14 | 'json' 15 | ], 16 | // check if imports actually resolve 17 | 'settings': { 18 | 'import/resolver': { 19 | 'webpack': { 20 | 'config': 'build/webpack.base.conf.js' 21 | } 22 | } 23 | }, 24 | // add your custom rules here 25 | 'rules': { 26 | // don't require .vue extension when importing 27 | 'import/extensions': ['error', 'always', { 28 | 'js': 'never', 29 | 'vue': 'never' 30 | }], 31 | // allow optionalDependencies 32 | 'import/no-extraneous-dependencies': ['error', { 33 | 'optionalDependencies': ['test/unit/index.js'] 34 | }], 35 | // allow debugger during development 36 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/stylesheets/modules/_nav.scss: -------------------------------------------------------------------------------- 1 | @import '../helpers/mixin'; 2 | 3 | .nav { 4 | @include clearfix(); 5 | list-style-type: none; 6 | margin: 0; 7 | padding: 0; 8 | position: absolute; 9 | top: 50%; 10 | transform: translate3d(0, -50%, 0); 11 | display: block; 12 | width: 100%; 13 | 14 | &__item { 15 | transition: all .2s ease-in-out; 16 | display: inline-block; 17 | height: 100px; 18 | width: 60px; 19 | background-color: rgba(255,255,255,.1); 20 | cursor: pointer; 21 | position: relative; 22 | &:first-child { float: left; } 23 | &:last-child { float: right; } 24 | 25 | &:hover { 26 | background-color: rgba(255,255,255,.2); 27 | .nav__arrow { width: 18px; } 28 | } 29 | } 30 | 31 | &__arrow { 32 | width: 15px; 33 | height: 24px; 34 | top: 50%; 35 | position: absolute; 36 | margin-top: -9px; 37 | fill: #fff; 38 | transition: width .2s ease-in-out; 39 | 40 | &--left { margin-left: 16px; } 41 | &--right { margin-left: 24px; } 42 | } 43 | } -------------------------------------------------------------------------------- /src/stylesheets/modules/_display.scss: -------------------------------------------------------------------------------- 1 | @import '../helpers/mixin'; 2 | 3 | .display { 4 | display: block; 5 | background-color: #fff; 6 | height: calc(100vh - 86px); 7 | position: absolute; 8 | width: 100%; 9 | top: 86px; 10 | bottom: 0; 11 | left: 0; 12 | right: 0; 13 | z-index: 2; 14 | 15 | &__gradientname { 16 | @include font-smoothing(); 17 | position: absolute; 18 | left: 50%; 19 | transform: translate3d(-50%, 0, 0); 20 | top: -8px; 21 | color: #fff; 22 | font-size: 20px; 23 | margin-top: 0; 24 | text-align: center; 25 | width: 300px; 26 | } 27 | 28 | &__footer { 29 | position: absolute; 30 | bottom: 0; 31 | font-size: 10px; 32 | left: 50%; 33 | transform: translate3d(-50%, 0, 0); 34 | opacity: 0.5; 35 | } 36 | 37 | &__byline { 38 | @include font-smoothing(); 39 | color: #fff; 40 | width: 300px; 41 | text-align: center; 42 | a { 43 | color: inherit; 44 | text-decoration: none; 45 | border-bottom: solid 1px rgba(234, 234, 234, 0.49); 46 | } 47 | } 48 | 49 | } -------------------------------------------------------------------------------- /src/services/gradientDownloader.js: -------------------------------------------------------------------------------- 1 | import { saveAs } from 'file-saver'; 2 | import toBlob from 'canvas-to-blob'; 3 | 4 | import Canvas from './canvasHelpers'; 5 | 6 | // Adds toBlob polyfill (for safari) 7 | toBlob.init(); 8 | 9 | export default function (direction, name, ...colors) { 10 | const canvas = document.createElement('canvas'); 11 | 12 | canvas.id = 'canva'; 13 | canvas.width = screen.width; // eslint-disable-line 14 | canvas.height = screen.height; // eslint-disable-line 15 | canvas.style.zIndex = 1; 16 | canvas.style.position = 'absolute'; 17 | document.body.appendChild(canvas); 18 | 19 | const canva = document.getElementById('canva'); 20 | const ctx = canva.getContext('2d'); 21 | 22 | const dir = Canvas.generateCoordinates(direction, canvas.height, canvas.width); 23 | const grd = ctx.createLinearGradient(...dir); 24 | 25 | ctx.fillStyle = Canvas.generateFillStyle(grd, ...colors); 26 | ctx.fillRect(0, 0, canvas.width, canvas.height); 27 | 28 | canvas.toBlob((blob) => { 29 | saveAs(blob, `${name}.jpg`); 30 | }); 31 | 32 | document.getElementById('canva').remove(); 33 | } 34 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.conf'); 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['PhantomJS'], 15 | frameworks: ['mocha', 'sinon-chai'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'], 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true, 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' }, 30 | ], 31 | }, 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Indrashish Ghosh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/assets/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing'; 3 | var server = require('../../build/dev-server.js'); 4 | 5 | // 2. run the nightwatch test suite against it 6 | // to run in additional browsers: 7 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 8 | // 2. add it to the --env flag below 9 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 10 | // For more information on Nightwatch's config file, see 11 | // http://nightwatchjs.org/guide#settings-file 12 | var opts = process.argv.slice(2); 13 | if (opts.indexOf('--config') === -1) { 14 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']); 15 | } 16 | if (opts.indexOf('--env') === -1) { 17 | opts = opts.concat(['--env', 'chrome']); 18 | } 19 | 20 | var spawn = require('cross-spawn'); 21 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }); 22 | 23 | runner.on('exit', function (code) { 24 | server.close(); 25 | process.exit(code); 26 | }); 27 | 28 | runner.on('error', function (err) { 29 | server.close(); 30 | throw err; 31 | }); 32 | -------------------------------------------------------------------------------- /test/unit/specs/Palette.spec.js: -------------------------------------------------------------------------------- 1 | import { mount } from 'avoriaz'; 2 | import Palette from '@/components/Palette'; 3 | 4 | 5 | const clickHandler = sinon.stub(); 6 | 7 | const wrapper = mount(Palette, { 8 | propsData: { 9 | direction: 'to left', 10 | gradient: { 11 | colors: ['#1FA2FF', '#21DCF6', '#A6FFCB'], 12 | name: 'Stripe', 13 | }, 14 | palletes: ['Cyans', 'Cyans', 'Greens'], 15 | updateGradient: clickHandler, 16 | }, 17 | }); 18 | 19 | describe('Palette.vue', () => { 20 | it('should have a class name of .palette__gradient', () => { 21 | expect(wrapper.is('.palette__gradient')) 22 | .to.equal(true); 23 | }); 24 | 25 | it('should render the gradient name', () => { 26 | expect(wrapper.contains('.palette__name')).to.equal(true); 27 | expect(wrapper.text()).to.equal('Stripe'); 28 | }); 29 | 30 | it('should have a gradient as background style', () => { 31 | expect(wrapper.hasStyle('background', 'linear-gradient(to left, #1FA2FF,#21DCF6,#A6FFCB)')) 32 | .to.equal(true); 33 | }); 34 | 35 | it('should call updateGradient method when clicked', () => { 36 | wrapper.trigger('click'); 37 | expect(clickHandler.called).to.equal(true); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/getingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/stylesheets/modules/_modal.scss: -------------------------------------------------------------------------------- 1 | .modal { 2 | &__mask { 3 | position: fixed; 4 | z-index: 9998; 5 | top: 0; 6 | left: 0; 7 | width: 100%; 8 | height: 100%; 9 | background-color: rgba(0, 0, 0, .5); 10 | transition: opacity .3s ease; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | &__container { 17 | width: 480px; 18 | padding: 40px 30px; 19 | background-color: #fff; 20 | border-radius: 2px; 21 | box-shadow: 0 2px 8px rgba(0, 0, 0, .33); 22 | transition: all .3s ease; 23 | text-align: center; 24 | } 25 | 26 | &__title { 27 | font-size: 18px; 28 | font-weight: 600; 29 | margin-top: 0; 30 | } 31 | 32 | &__text { 33 | font-size: 15px; 34 | line-height: 1.5; 35 | margin-bottom: 22px; 36 | } 37 | 38 | &__content { 39 | height: 105px; 40 | background-color: #F9FAFC; 41 | margin-bottom: 20px; 42 | } 43 | 44 | &__success { 45 | height: 100%; 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | } 50 | 51 | } 52 | 53 | 54 | .modal-enter, 55 | .modal-leave-active { 56 | opacity: 0; 57 | } 58 | 59 | .modal-enter .modal__container, 60 | .modal-leave-active .modal__container { 61 | -webkit-transform: scale(1.1); 62 | transform: scale(1.1); 63 | } -------------------------------------------------------------------------------- /src/stylesheets/modules/_hex.scss: -------------------------------------------------------------------------------- 1 | .hex { 2 | display: inline-block; 3 | font-family: "Source Code Pro", Menlo, Consolas, monospace; 4 | font-size: 15px; 5 | position: relative; 6 | cursor: pointer; 7 | padding: 3px 6px; 8 | border-radius: 3px; 9 | transition: background 0.2s ease-in-out; 10 | display: flex; 11 | align-items: center; 12 | 13 | &:hover { 14 | background-color: #eceaea; 15 | } 16 | 17 | &__block { 18 | position: relative; 19 | // float: left; 20 | // cursor: pointer; 21 | // margin-top: 3px; 22 | margin-right: 3px; 23 | display: inline-block; 24 | width: 14px; 25 | height: 14px; 26 | background-color: #eaeaea; 27 | } 28 | 29 | &__name { 30 | margin-left: 3px; 31 | font-size: 14px; 32 | } 33 | 34 | &__copied { 35 | position: absolute; 36 | background-color: #eaeaea; 37 | padding: 3px 5px; 38 | font-size: 12px; 39 | border-radius: 3px; 40 | margin-left: -27px; 41 | bottom: 0; 42 | left: 50%; 43 | opacity: 1; 44 | } 45 | 46 | &__arrow { 47 | font-size: 16px !important; 48 | margin-top: 2px; 49 | color: #767676; 50 | &:last-child { 51 | display: none; 52 | } 53 | } 54 | 55 | // &.last { 56 | // .hex__arrow { display: none; } 57 | // } 58 | } 59 | -------------------------------------------------------------------------------- /src/stylesheets/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | @import '../helpers/mixin'; 2 | 3 | .button { 4 | border-radius: 2px; 5 | color: #fff; 6 | font-weight: 600; 7 | padding: 0 10px 0 10px; 8 | background-color: #eaeaea; 9 | text-decoration: none; 10 | height: 30px; 11 | line-height: 30px; 12 | font-size: 12px; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | width: 140px; 17 | transition: background-color 0.2s ease-in-out; 18 | 19 | span { @include font-smoothing(); } 20 | 21 | &__icon { 22 | width: 14px; 23 | height: 14px; 24 | margin-right: 5px; 25 | fill: #fff; 26 | } 27 | 28 | &--facebook { 29 | background-color: #3b5998; 30 | &:hover { 31 | background-color: darken(#3b5998, 5%); 32 | } 33 | } 34 | 35 | &--twitter { 36 | background-color: #1da1f2; 37 | &:hover { 38 | background-color: darken(#1da1f2, 5%); 39 | } 40 | } 41 | } 42 | 43 | 44 | .btn { 45 | @include font-smoothing(); 46 | display: inline-block; 47 | box-sizing: content-box; 48 | background-color: #1abc9c; 49 | color: #fff; 50 | font-weight: bold; 51 | font-size: 12px; 52 | text-transform: uppercase; 53 | text-decoration: none; 54 | padding: 15px 25px; 55 | border-radius: 30px; 56 | outline: 0 !important; 57 | border: 0; 58 | transition: all .2s ease-in-out; 59 | cursor: pointer; 60 | 61 | &:hover { 62 | background-color: darken(#1abc9c, 10%) !important; 63 | } 64 | } -------------------------------------------------------------------------------- /src/services/canvasHelpers.js: -------------------------------------------------------------------------------- 1 | const canvasHelpers = { 2 | 3 | generateCoordinates(direction, height, width) { 4 | switch (direction) { 5 | case 'to left': 6 | return [width, height, 0, height]; 7 | case 'to right': 8 | return [0, height, width, height]; 9 | case 'to top': 10 | return [0, height, 0, 0]; 11 | case 'to bottom': 12 | return [width, 0, width, height]; 13 | default: 14 | return []; 15 | } 16 | }, 17 | 18 | /** 19 | * TODO: Calculate the color stops programmatically 20 | */ 21 | generateFillStyle(grd, ...colors) { 22 | switch (colors.length) { 23 | case 2: 24 | grd.addColorStop(0, colors[0]); 25 | grd.addColorStop(1, colors[1]); 26 | break; 27 | case 3: 28 | grd.addColorStop(0, colors[0]); 29 | grd.addColorStop(0.5, colors[1]); 30 | grd.addColorStop(1, colors[2]); 31 | break; 32 | case 4: 33 | grd.addColorStop(0, colors[0]); 34 | grd.addColorStop(0.4, colors[1]); 35 | grd.addColorStop(0.8, colors[2]); 36 | grd.addColorStop(1, colors[3]); 37 | break; 38 | case 5: 39 | grd.addColorStop(0, colors[0]); 40 | grd.addColorStop(0.25, colors[1]); 41 | grd.addColorStop(0.5, colors[2]); 42 | grd.addColorStop(0.75, colors[3]); 43 | grd.addColorStop(1, colors[4]); 44 | break; 45 | default: 46 | } 47 | return grd; 48 | }, 49 | 50 | }; 51 | 52 | export default canvasHelpers; 53 | -------------------------------------------------------------------------------- /src/stylesheets/components/_tooltips.scss: -------------------------------------------------------------------------------- 1 | [data-tooltip] { 2 | position: relative; 3 | 4 | &:before, 5 | &:after { 6 | opacity: 0; 7 | pointer-events: none; 8 | transition: all 0.18s ease-in-outs; 9 | position: absolute; 10 | z-index: 10; 11 | transform-origin: top; 12 | bottom: auto; 13 | left: 50%; 14 | top: 100%; 15 | transform: translate(-50%, -10px); 16 | 17 | } 18 | 19 | &:after { 20 | background: rgba(17, 17, 17, 0.9); 21 | border-radius: 4px; 22 | color: #fff; 23 | content: attr(data-tooltip); 24 | font-size: 12px; 25 | padding: .5em 1em; 26 | white-space: nowrap; 27 | margin-top: 11px; 28 | } 29 | 30 | &:before { 31 | background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat; 32 | background-size: 100% auto; 33 | height: 6px; 34 | width: 18px; 35 | margin-top: 5px; 36 | margin-bottom: 0; 37 | content: ''; 38 | } 39 | 40 | } 41 | 42 | 43 | 44 | [data-tooltip]:hover:before, 45 | [data-tooltip][data-tooltip-visible]:before, 46 | [data-tooltip]:hover:after, 47 | [data-tooltip][data-tooltip-visible]:after { 48 | opacity: 1; 49 | pointer-events: auto; 50 | transform: translate(-50%, 0); 51 | } 52 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: false, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 9000, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/Swatch.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 67 | -------------------------------------------------------------------------------- /src/stylesheets/modules/_palette.scss: -------------------------------------------------------------------------------- 1 | @import '../helpers/mixin'; 2 | 3 | .palette { 4 | display: block; 5 | background-color: #333; 6 | height: calc(100vh - 86px); 7 | position: absolute; 8 | z-index: 3; 9 | width: 100%; 10 | top: 86px; 11 | bottom: 0; 12 | left: 0; 13 | right: 0; 14 | padding-bottom: 8px; 15 | overflow: scroll; 16 | box-sizing: border-box; 17 | // transition: all 0.3s ease-in-out; 18 | backface-visibility: hidden; 19 | transition: all 0.25s cubic-bezier(.62,.28,.23,.99); 20 | transform: translate3d(0, -100%, 0); 21 | will-change: transform; 22 | opacity: 0; 23 | 24 | &.active { 25 | transform: translate3d(0 ,0, 0); 26 | opacity: 1; 27 | } 28 | 29 | &__list { 30 | @include clearfix(); 31 | margin: 0; 32 | padding: 0; 33 | list-style-type: none; 34 | display: flex; 35 | flex-wrap: wrap; 36 | padding: 10px; 37 | } 38 | 39 | &__item { 40 | flex: 0 1 33.33%; 41 | box-sizing: border-box; 42 | padding: 10px; 43 | transition: all 0.1s ease-in-out; 44 | cursor: pointer; 45 | 46 | &:hover { 47 | background-color: #222; 48 | border-radius: 3px; 49 | transform: scale(1.02); 50 | .palette__name { 51 | border-bottom: solid 1px rgba(234, 234, 234, 0.49); 52 | } 53 | } 54 | 55 | } 56 | 57 | &__gradient { 58 | height: 150px; 59 | border-radius: 3px; 60 | display: flex; 61 | justify-content: center; 62 | align-items: center; 63 | } 64 | 65 | &__name { 66 | // @include font-smoothing(); 67 | text-align: center; 68 | color: #fff; 69 | margin: 0; 70 | padding: 0; 71 | font-family: "Source Code Pro", monospace; 72 | font-size: 15px; 73 | } 74 | 75 | } -------------------------------------------------------------------------------- /src/stylesheets/app.scss: -------------------------------------------------------------------------------- 1 | @import 'helpers/mixin'; 2 | @import 'helpers/utils'; 3 | 4 | @import 'base/breakpoints'; 5 | @import 'base/layout'; 6 | @import 'base/animations'; 7 | 8 | @import 'components/spinner'; 9 | @import 'components/tooltips'; 10 | @import 'components/buttons'; 11 | @import 'components/burger'; 12 | @import 'components/menu'; 13 | 14 | @import 'modules/header'; 15 | @import 'modules/actionbar'; 16 | @import 'modules/social'; 17 | @import 'modules/display'; 18 | @import 'modules/hex'; 19 | @import 'modules/loader'; 20 | @import 'modules/nav'; 21 | @import 'modules/shortlist'; 22 | @import 'modules/palette'; 23 | @import 'modules/modal'; 24 | @import 'modules/codeblock'; 25 | 26 | 27 | .sponsor { 28 | align-items: center; 29 | text-decoration: none; 30 | display: none; 31 | 32 | @include respond-to(sponsor) { 33 | display: flex; 34 | } 35 | 36 | &:hover { 37 | .sponsor__cta { 38 | transform: translate3d(3px,0,0) 39 | } 40 | } 41 | 42 | &__add { 43 | width: 14px; 44 | height: 14px; 45 | margin: 0 8px 0 8px; 46 | } 47 | 48 | &__logo { 49 | width: 120px; 50 | height: 15px; 51 | fill: #48A4AB; 52 | } 53 | 54 | &__cta { 55 | display: flex; 56 | align-items: center; 57 | transition: transform 0.3s ease-in-out; 58 | will-change: transform; 59 | 60 | background-color: #e2e2e2; 61 | height: 24px; 62 | border-radius: 50px; 63 | padding: 0 2px; 64 | margin-left: 10px; 65 | } 66 | 67 | &__byline { 68 | font-size: 12px; 69 | margin-left: 8px; 70 | color: #656565; 71 | text-decoration: none; 72 | } 73 | 74 | &__arrow { 75 | transform: rotate(-90deg); 76 | width: 21px; 77 | height: 21px; 78 | margin-left: -4px; 79 | margin-top: 2px; 80 | fill: #656565; 81 | } 82 | } -------------------------------------------------------------------------------- /src/stylesheets/modules/_actionbar.scss: -------------------------------------------------------------------------------- 1 | @import '../helpers/mixin'; 2 | 3 | .actionbar { 4 | background-color: #FFF; 5 | height: 36px; 6 | padding: 0 20px; 7 | display: flex; 8 | justify-content: space-between; 9 | text-align: left; 10 | align-items: center; 11 | z-index: 4; 12 | position: relative; 13 | box-shadow: rgba(0, 0, 0, 0.22) 0px 1px 4px; 14 | padding: 0; 15 | 16 | @include respond-to(medium) { 17 | padding: 0 20px; 18 | } 19 | 20 | &__section { 21 | flex-grow: 1; 22 | flex-basis: 33.333%; 23 | margin-top: -2px; // hack to visually center align content 24 | 25 | &--swatch { 26 | display: flex; 27 | justify-content: center; 28 | flex-basis: 100%; 29 | 30 | // @include respond-to(medium) { 31 | // flex-basis: 33.33%; 32 | // } 33 | 34 | } 35 | } 36 | 37 | &__left { 38 | display: flex; 39 | } 40 | 41 | &__nav { 42 | list-style-type: none; 43 | margin: 0; 44 | padding: 0; 45 | align-items: center; 46 | justify-content: flex-end; 47 | height: 38px; 48 | display: none; 49 | 50 | @include respond-to(medium) { 51 | display: flex; 52 | } 53 | 54 | } 55 | 56 | &__nav-item { 57 | margin-left: 10px; 58 | position: relative; 59 | height: 100%; 60 | width: 40px; 61 | text-align: center; 62 | &:not(:first-child):before { 63 | content: '|'; 64 | margin-left: 10px; 65 | position: absolute; 66 | left: -17px; 67 | top: 9px; 68 | color: #eaeaea; 69 | } 70 | } 71 | 72 | &__nav-link { 73 | // height: 100%; 74 | // display: block; 75 | padding: 7px 8px 3px; 76 | border-radius: 3px; 77 | 78 | &:hover { 79 | background-color: #f3f3f3; 80 | } 81 | } 82 | 83 | &__nav-icon { 84 | width: 16px; 85 | height: 16px; 86 | margin-top: 12px; 87 | fill: #3c4859; 88 | } 89 | 90 | &__burger { 91 | display: none; 92 | 93 | @include respond-to(medium) { 94 | display: flex; 95 | } 96 | 97 | } 98 | 99 | } 100 | -------------------------------------------------------------------------------- /src/stylesheets/helpers/_mixin.scss: -------------------------------------------------------------------------------- 1 | @import '../base/breakpoints'; 2 | 3 | /** 4 | * Uses $breakpoints from _breakpoints.scss 5 | */ 6 | @mixin respond-to($breakpoint) { 7 | $value: map-get($breakpoints, $breakpoint); 8 | @if $value != null { 9 | @media (min-width: $value) { 10 | @content; 11 | } 12 | } 13 | } 14 | 15 | @mixin clearfix() { 16 | &::before, 17 | &::after { 18 | clear: both; 19 | content: ''; 20 | display: table; 21 | } 22 | } 23 | 24 | @mixin font-smoothing($value: antialiased) { 25 | @if $value == antialiased { 26 | -webkit-font-smoothing: antialiased; 27 | -moz-osx-font-smoothing: grayscale; 28 | } 29 | @else { 30 | -webkit-font-smoothing: subpixel-antialiased; 31 | -moz-osx-font-smoothing: auto; 32 | } 33 | } 34 | 35 | 36 | @mixin burger($width: 30px, $height: 5px, $gutter: 3px, $color: #000, $border-radius: 0, $transition-duration: .3s) { 37 | $burger-height: $height !global; 38 | $burger-gutter: $gutter !global; 39 | 40 | position: relative; 41 | margin-top: $height + $gutter; 42 | margin-bottom: $height + $gutter; 43 | 44 | &, &:before, &:after { 45 | display: block; 46 | width: $width; 47 | height: $height; 48 | background-color: $color; 49 | @if $border-radius != 0 { 50 | border-radius: $border-radius; 51 | } 52 | 53 | transition-property: background-color, transform; 54 | transition-duration: $transition-duration; 55 | } 56 | 57 | &:before, &:after { 58 | position: absolute; 59 | content: ""; 60 | } 61 | 62 | &:before { top: -($height + $gutter); } 63 | &:after { top: $height + $gutter; } 64 | } 65 | 66 | 67 | /** 68 | * Select parts of the burger 69 | */ 70 | 71 | @mixin burger-parts { 72 | &, &:before, &:after { 73 | @content; 74 | } 75 | } 76 | 77 | @mixin burger-top { 78 | &:before { @content; } 79 | } 80 | 81 | @mixin burger-middle { 82 | & { @content; } 83 | } 84 | 85 | @mixin burger-bottom { 86 | &:after { @content; } 87 | } 88 | 89 | 90 | /** 91 | * Burger animations 92 | */ 93 | 94 | @mixin burger-to-cross { 95 | & { background-color: transparent !important; } 96 | &:before { transform: translateY($burger-gutter + $burger-height) rotate(45deg); } 97 | &:after { transform: translateY(-($burger-gutter + $burger-height)) rotate(-45deg); } 98 | } 99 | -------------------------------------------------------------------------------- /src/assets/skillshare.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | uiGradients - Beautiful colored gradients 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 52 | 53 | 54 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /src/components/Topbar.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 84 | -------------------------------------------------------------------------------- /test/e2e/specs/app.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'App load test': function test(browser) { 3 | const devServer = browser.globals.devServerURL; 4 | browser 5 | .url(devServer) 6 | .waitForElementVisible('#app', 5000) 7 | .assert.elementPresent('.header') 8 | .assert.elementPresent('.actionbar') 9 | .assert.elementPresent('.display') 10 | .assert.elementPresent('.nav') 11 | .end(); 12 | }, 13 | 14 | 'Gradient navigation test': function test(browser) { 15 | const devServer = browser.globals.devServerURL; 16 | browser 17 | .url(`${devServer}/#Cherry`) 18 | .waitForElementVisible('#app', 5000) 19 | .pause(3000) // wait for preloader to fade 20 | .assert.containsText('.display__gradientname p', 'Cherry') 21 | .click('#nav--next') 22 | .assert.containsText('.display__gradientname p', 'Pinky') 23 | .click('#nav--prev') 24 | .click('#nav--prev') 25 | .assert.containsText('.display__gradientname p', 'Mojito') 26 | .end(); 27 | }, 28 | 29 | 'Copy css code test': function test(browser) { 30 | const devServer = browser.globals.devServerURL; 31 | browser 32 | .url(`${devServer}/#Cherry`) 33 | .waitForElementVisible('#app', 5000) 34 | .pause(3000) // wait for preloader to fade 35 | .click('#js-code') 36 | .assert.elementPresent('.modal__container') 37 | .assert.elementPresent('.codeblock') 38 | .click('#js-copy') 39 | .assert.elementPresent('.modal__success') 40 | .assert.elementNotPresent('.codeblock') 41 | .pause(2000) // wait for copy message to fade out 42 | .assert.elementNotPresent('.modal__success') 43 | .assert.elementPresent('.codeblock') 44 | .click('.modal__mask') 45 | .assert.hidden('.modal__container') 46 | .end(); 47 | }, 48 | 49 | 'Gradient Rotation test': function test(browser) { 50 | const devServer = browser.globals.devServerURL; 51 | browser 52 | .url(`${devServer}/#CanYouFeelTheLoveTonight`) 53 | .waitForElementVisible('#app', 5000) 54 | .pause(3000) // wait for preloader to fade 55 | .assert.attributeContains('.display', 'style', 'background: linear-gradient(to right, rgb(69, 104, 220), rgb(176, 106, 179));', 'Assert gradient rotation to right') 56 | .click('#js-direction') 57 | .assert.attributeContains('.display', 'style', 'background: linear-gradient(rgb(69, 104, 220), rgb(176, 106, 179));', 'Assert gradient rotation to bottom') 58 | .click('#js-direction') 59 | .assert.attributeContains('.display', 'style', 'background: linear-gradient(to left, rgb(69, 104, 220), rgb(176, 106, 179));', 'Assert gradient rotation to left') 60 | .click('#js-direction') 61 | .assert.attributeContains('.display', 'style', 'background: linear-gradient(to top, rgb(69, 104, 220), rgb(176, 106, 179));', 'Assert gradient rotation to top') 62 | .click('#js-direction') 63 | .assert.attributeContains('.display', 'style', 'background: linear-gradient(to right, rgb(69, 104, 220), rgb(176, 106, 179));', 'Assert gradient rotation to right') 64 | .end(); 65 | }, 66 | }; 67 | -------------------------------------------------------------------------------- /src/assets/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/components/modals/CodeModal.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 35 | 88 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

6 | 7 | Made with love 8 | 9 | 10 | License 11 | 12 | 13 | Contributors 14 | 15 | 16 | Build Status 17 | 18 |

19 | 20 |

21 | uiGradients is a community contributed collection of beautiful multi-color gradients 22 |

23 | 24 | --- 25 | 26 |   27 | 28 | ## About 29 | This is an effort to give back to the community, by the community. Hopefully this will help you draw inspiration and serve as a resource for picking gradients for your own projects. 30 | 31 |   32 | 33 | ## Contributing 34 | Adding a gradient to the library is super simple. All the gradients are loaded and rendered from a single `gradients.json` file in the root. 35 | 36 | To add your gradient, fork this repository, add your gradient colors in the HEX format along with a name to the end of the json file and submit a pull request. Don't forget the commas! 37 | 38 | ``` 39 | [ 40 | { 41 | … 42 | }, 43 | { 44 | "name": "Career", 45 | "colors": ["#cb202d", "#dc1e28", "#3366cc"] 46 | } 47 | ] 48 | ``` 49 | 50 | *NOTE* - Please keep gradient submissions and bug fixes in separate PRs. 51 | 52 |   53 | 54 | ### Improvements and Bugs 55 | Please feel free to open a new issue [here](https://github.com/Ghosh/uiGradients/issues) with your suggestions or any bugs which you may have come across. 56 | 57 |   58 | 59 | ## Data 60 | While there is no official api, all the gradients are present in the `gradients.json` file. The code below is an example of fetching the data via a CURL request 61 | ``` 62 | curl -i https://raw.githubusercontent.com/ghosh/uiGradients/master/gradients.json 63 | ``` 64 | 65 |   66 | 67 | ## Built with uiGradients 68 | A few open source projects built with uiGradients 69 | - [UIColor-uiGradientsAdditions](https://github.com/kaiinui/UIColor-uiGradientsAdditions) - uiGradients for iOS 70 | - [NilColorKit](https://github.com/NilStack/NilColorKit) - uiGradients made for swift 71 | - [uigradients](https://github.com/JSBros/uigradients) - Styled components for uiGradients 72 | - [uigradients-scss](https://github.com/subinsebastian/uigradients-scss) - uiGradients ported to scss 73 | - [helper-uigradient](https://github.com/helpers/helper-uigradient) - Handlebar helper for uiGradients 74 | - [Uigradients iOS Viewer](https://github.com/thexande/uiGradients-Viewer-iOS) - Open source iOS app for viewing gradients 75 | - [Potion](http://numberpicture.com/build) - React components for declaratively composing animated, interactive visualizations 76 | - [Randient](https://github.com/uias/Randient) - Randomised, radient gradients for iOS. 77 | - [RandomGradient](https://github.com/Gabriel-Denys/RandomGradient) - Radomised gradients via json api 78 | 79 |   80 | 81 | ## License 82 | 83 | [MIT](https://github.com/ghosh/uiGradients/blob/master/LICENSE.md) 84 | 85 |   86 | 87 |

✌️

88 |

89 | A little project by @i_ghosh 90 |

91 | -------------------------------------------------------------------------------- /src/components/Actionbar.vue: -------------------------------------------------------------------------------- 1 | 68 | 69 | 70 | 106 | -------------------------------------------------------------------------------- /src/components/Display.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 110 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uigradients", 3 | "version": "2.0.0", 4 | "description": "Community contributed collection of beautiful multi-color gradients", 5 | "author": "Indrashish Ghosh ", 6 | "private": true, 7 | "scripts": { 8 | "start": "npm run dev", 9 | "dev": "node build/dev-server.js", 10 | "build": "node build/build.js", 11 | "deploy": "gh-pages-deploy", 12 | "test": "npm run unit && npm run e2e && npm run lintjson", 13 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 14 | "e2e": "node test/e2e/runner.js", 15 | "watchunit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js", 16 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs", 17 | "lintjson": "eslint gradients.json", 18 | "bustcache": "cfcli purge" 19 | }, 20 | "dependencies": { 21 | "vue": "^2.5.9" 22 | }, 23 | "devDependencies": { 24 | "autoprefixer": "^7.1.6", 25 | "avoriaz": "^6.3.0", 26 | "babel-core": "^6.22.1", 27 | "babel-eslint": "^8.2.2", 28 | "babel-loader": "^7.1.2", 29 | "babel-plugin-istanbul": "^4.1.5", 30 | "babel-plugin-transform-runtime": "^6.22.0", 31 | "babel-preset-env": "^1.6.1", 32 | "babel-preset-stage-2": "^6.22.0", 33 | "babel-register": "^6.22.0", 34 | "canvas-to-blob": "0.0.0", 35 | "chai": "^4.1.2", 36 | "chalk": "^2.3.0", 37 | "chromedriver": "^2.38.3", 38 | "clipboard": "^2.0.0", 39 | "connect-history-api-fallback": "^1.5.0", 40 | "copy-webpack-plugin": "^4.5.1", 41 | "cross-env": "^5.1.3", 42 | "cross-spawn": "^6.0.5", 43 | "css-loader": "^0.28.11", 44 | "eslint": "^4.17.0", 45 | "eslint-config-airbnb-base": "^12.1.0", 46 | "eslint-friendly-formatter": "^4.0.1", 47 | "eslint-import-resolver-webpack": "^0.8.4", 48 | "eslint-loader": "^1.6.1", 49 | "eslint-plugin-html": "^4.0.1", 50 | "eslint-plugin-import": "^2.8.0", 51 | "eslint-plugin-json": "^1.2.0", 52 | "eventsource-polyfill": "^0.9.6", 53 | "express": "^4.16.3", 54 | "extract-text-webpack-plugin": "^3.0.2", 55 | "file-loader": "^1.1.6", 56 | "file-saver": "^1.3.3", 57 | "friendly-errors-webpack-plugin": "^1.1.3", 58 | "function-bind": "^1.1.1", 59 | "gh-pages-deploy": "^0.4.2", 60 | "hex-to-hsl": "^1.0.2", 61 | "html-webpack-plugin": "^3.0.4", 62 | "http-proxy-middleware": "^0.17.3", 63 | "inject-loader": "^3.0.0-beta4", 64 | "karma": "^2.0.0", 65 | "karma-coverage": "^1.1.1", 66 | "karma-mocha": "^1.3.0", 67 | "karma-phantomjs-launcher": "^1.0.2", 68 | "karma-sinon-chai": "^1.3.3", 69 | "karma-sourcemap-loader": "^0.3.7", 70 | "karma-spec-reporter": "^0.0.31", 71 | "karma-webpack": "^2.0.5", 72 | "lolex": "^2.3.1", 73 | "mocha": "^4.0.1", 74 | "nightwatch": "^0.9.19", 75 | "node-sass": "^4.7.2", 76 | "opn": "^5.0.0", 77 | "optimize-css-assets-webpack-plugin": "^3.2.0", 78 | "ora": "^2.0.0", 79 | "phantomjs-prebuilt": "^2.1.16", 80 | "rimraf": "^2.6.2", 81 | "sass-loader": "^6.0.3", 82 | "selenium-server": "^3.7.1", 83 | "semver": "^5.3.0", 84 | "sinon": "^4.1.2", 85 | "sinon-chai": "^3.0.0", 86 | "url-loader": "^0.6.2", 87 | "vue-analytics": "^5.10.4", 88 | "vue-clipboards": "^1.2.1", 89 | "vue-loader": "^14.2.2", 90 | "vue-style-loader": "^3.1.2", 91 | "vue-svg-loader": "0.3.0", 92 | "vue-template-compiler": "^2.5.13", 93 | "webpack": "^3.10.0", 94 | "webpack-bundle-analyzer": "^2.9.1", 95 | "webpack-dev-middleware": "^1.10.0", 96 | "webpack-hot-middleware": "^2.20.0", 97 | "webpack-merge": "^4.1.1" 98 | }, 99 | "engines": { 100 | "node": ">= 4.0.0", 101 | "npm": ">= 3.0.0" 102 | }, 103 | "browserslist": [ 104 | "> 1%", 105 | "last 4 versions", 106 | "not ie <= 8" 107 | ], 108 | "gh-pages-deploy": { 109 | "staticpath": "dist", 110 | "cname": "uigradients.com", 111 | "prep": [ 112 | "build" 113 | ], 114 | "post": [ 115 | "bustcache" 116 | ], 117 | "noprompt": true 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /src/components/List.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 146 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 192 | -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/logo2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/components/Preload.vue: -------------------------------------------------------------------------------- 1 | 54 | 55 | 56 | 79 | -------------------------------------------------------------------------------- /gradients.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Omolon", 4 | "colors": ["#091E3A", "#2F80ED", "#2D9EE0"] 5 | }, 6 | { 7 | "name": "Farhan", 8 | "colors": ["#9400D3", "#4B0082"] 9 | }, 10 | { 11 | "name": "Purple", 12 | "colors": ["#c84e89", "#F15F79"] 13 | }, 14 | { 15 | "name": "Ibtesam", 16 | "colors": ["#00F5A0", "#00D9F5"] 17 | }, 18 | { 19 | "name": "Radioactive Heat", 20 | "colors": ["#F7941E", "#72C6EF", "#00A651"] 21 | }, 22 | { 23 | "name": "The Sky And The Sea", 24 | "colors": ["#F7941E", "#004E8F"] 25 | }, 26 | { 27 | "name": "From Ice To Fire", 28 | "colors": ["#72C6EF", "#004E8F"] 29 | }, 30 | 31 | { 32 | "name": "Blue & Orange", 33 | "colors": ["#FD8112", "#0085CA"] 34 | }, 35 | { 36 | "name": "Purple Dream", 37 | "colors": ["#bf5ae0","#a811da"] 38 | }, 39 | { 40 | "name": "Blu", 41 | "colors": ["#00416A", "#E4E5E6"] 42 | }, 43 | { 44 | "name": "Summer Breeze", 45 | "colors": ["#fbed96", "#abecd6"] 46 | }, 47 | { 48 | "name": "Ver", 49 | "colors": ["#FFE000", "#799F0C"] 50 | }, 51 | { 52 | "name": "Ver Black", 53 | "colors": ["#F7F8F8", "#ACBB78"] 54 | }, 55 | { 56 | "name": "Combi", 57 | "colors": ["#00416A", "#799F0C", "#FFE000"] 58 | }, 59 | { 60 | "name": "Anwar", 61 | "colors": ["#334d50", "#cbcaa5"] 62 | }, 63 | { 64 | "name": "Bluelagoo", 65 | "colors": ["#0052D4", "#4364F7", "#6FB1FC"] 66 | }, 67 | { 68 | "name": "Lunada", 69 | "colors": ["#5433FF", "#20BDFF", "#A5FECB"] 70 | }, 71 | { 72 | "name": "Reaqua", 73 | "colors": ["#799F0C", "#ACBB78"] 74 | }, 75 | { 76 | "name": "Mango", 77 | "colors": ["#ffe259", "#ffa751"] 78 | }, 79 | { 80 | "name": "Bupe", 81 | "colors": ["#00416A", "#E4E5E6"] 82 | }, 83 | { 84 | "name": "Rea", 85 | "colors": ["#FFE000", "#799F0C"] 86 | }, 87 | { 88 | "name": "Windy", 89 | "colors": ["#acb6e5", "#86fde8"] 90 | }, 91 | { 92 | "name": "Royal Blue", 93 | "colors": ["#536976", "#292E49"] 94 | }, 95 | { 96 | "name": "Royal Blue + Petrol", 97 | "colors": ["#BBD2C5", "#536976", "#292E49"] 98 | }, 99 | { 100 | "name": "Copper", 101 | "colors": ["#B79891", "#94716B"] 102 | }, 103 | { 104 | "name": "Anamnisar", 105 | "colors": ["#9796f0", "#fbc7d4"] 106 | }, 107 | { 108 | "name": "Petrol", 109 | "colors": ["#BBD2C5", "#536976"] 110 | }, 111 | { 112 | "name": "Sky", 113 | "colors": ["#076585", "#fff"] 114 | }, 115 | { 116 | "name": "Sel", 117 | "colors": ["#00467F", "#A5CC82"] 118 | }, 119 | { 120 | "name": "Afternoon", 121 | "colors": ["#000C40", "#607D8B"] 122 | }, 123 | { 124 | "name": "Skyline", 125 | "colors": ["#1488CC", "#2B32B2"] 126 | }, 127 | { 128 | "name": "DIMIGO", 129 | "colors": ["#ec008c", "#fc6767"] 130 | }, 131 | { 132 | "name": "Purple Love", 133 | "colors": ["#cc2b5e", "#753a88"] 134 | }, 135 | { 136 | "name": "Sexy Blue", 137 | "colors": ["#2193b0", "#6dd5ed"] 138 | }, 139 | { 140 | "name": "Blooker20", 141 | "colors": ["#e65c00", "#F9D423"] 142 | }, 143 | { 144 | "name": "Sea Blue", 145 | "colors": ["#2b5876", "#4e4376"] 146 | }, 147 | { 148 | "name": "Nimvelo", 149 | "colors": ["#314755", "#26a0da"] 150 | }, 151 | { 152 | "name": "Hazel", 153 | "colors": ["#77A1D3", "#79CBCA", "#E684AE"] 154 | }, 155 | { 156 | "name": "Noon to Dusk", 157 | "colors": ["#ff6e7f", "#bfe9ff"] 158 | }, 159 | { 160 | "name": "YouTube", 161 | "colors": ["#e52d27", "#b31217"] 162 | }, 163 | { 164 | "name": "Cool Brown", 165 | "colors": ["#603813", "#b29f94"] 166 | }, 167 | { 168 | "name": "Harmonic Energy", 169 | "colors": ["#16A085", "#F4D03F"] 170 | }, 171 | { 172 | "name": "Playing with Reds", 173 | "colors": ["#D31027", "#EA384D"] 174 | }, 175 | { 176 | "name": "Sunny Days", 177 | "colors": ["#EDE574", "#E1F5C4"] 178 | }, 179 | { 180 | "name": "Green Beach", 181 | "colors": ["#02AAB0", "#00CDAC"] 182 | }, 183 | { 184 | "name": "Intuitive Purple", 185 | "colors": ["#DA22FF", "#9733EE"] 186 | }, 187 | { 188 | "name": "Emerald Water", 189 | "colors": ["#348F50", "#56B4D3"] 190 | }, 191 | { 192 | "name": "Lemon Twist", 193 | "colors": ["#3CA55C", "#B5AC49"] 194 | }, 195 | { 196 | "name": "Monte Carlo", 197 | "colors": ["#CC95C0", "#DBD4B4", "#7AA1D2"] 198 | }, 199 | { 200 | "name": "Horizon", 201 | "colors": ["#003973", "#E5E5BE"] 202 | }, 203 | { 204 | "name": "Rose Water", 205 | "colors": ["#E55D87", "#5FC3E4"] 206 | }, 207 | { 208 | "name": "Frozen", 209 | "colors": ["#403B4A", "#E7E9BB"] 210 | }, 211 | { 212 | "name": "Mango Pulp", 213 | "colors": ["#F09819", "#EDDE5D"] 214 | }, 215 | { 216 | "name": "Bloody Mary", 217 | "colors": ["#FF512F", "#DD2476"] 218 | }, 219 | { 220 | "name": "Aubergine", 221 | "colors": ["#AA076B", "#61045F"] 222 | }, 223 | { 224 | "name": "Aqua Marine", 225 | "colors": ["#1A2980", "#26D0CE"] 226 | }, 227 | { 228 | "name": "Sunrise", 229 | "colors": ["#FF512F", "#F09819"] 230 | }, 231 | { 232 | "name": "Purple Paradise", 233 | "colors": ["#1D2B64", "#F8CDDA"] 234 | }, 235 | { 236 | "name": "Stripe", 237 | "colors": ["#1FA2FF", "#12D8FA", "#A6FFCB"] 238 | }, 239 | { 240 | "name": "Sea Weed", 241 | "colors": ["#4CB8C4", "#3CD3AD"] 242 | }, 243 | { 244 | "name": "Pinky", 245 | "colors": ["#DD5E89", "#F7BB97"] 246 | }, 247 | { 248 | "name": "Cherry", 249 | "colors": ["#EB3349", "#F45C43"] 250 | }, 251 | { 252 | "name": "Mojito", 253 | "colors": ["#1D976C", "#93F9B9"] 254 | }, 255 | { 256 | "name": "Juicy Orange", 257 | "colors": ["#FF8008", "#FFC837"] 258 | }, 259 | { 260 | "name": "Mirage", 261 | "colors": ["#16222A", "#3A6073"] 262 | }, 263 | { 264 | "name": "Steel Gray", 265 | "colors": ["#1F1C2C", "#928DAB"] 266 | }, 267 | { 268 | "name": "Kashmir", 269 | "colors": ["#614385", "#516395"] 270 | }, 271 | { 272 | "name": "Electric Violet", 273 | "colors": ["#4776E6", "#8E54E9"] 274 | }, 275 | { 276 | "name": "Venice Blue", 277 | "colors": ["#085078", "#85D8CE"] 278 | }, 279 | { 280 | "name": "Bora Bora", 281 | "colors": ["#2BC0E4", "#EAECC6"] 282 | }, 283 | { 284 | "name": "Moss", 285 | "colors": ["#134E5E", "#71B280"] 286 | }, 287 | { 288 | "name": "Shroom Haze", 289 | "colors": ["#5C258D", "#4389A2"] 290 | }, 291 | { 292 | "name": "Mystic", 293 | "colors": ["#757F9A", "#D7DDE8"] 294 | }, 295 | { 296 | "name": "Midnight City", 297 | "colors": ["#232526", "#414345"] 298 | }, 299 | { 300 | "name": "Sea Blizz", 301 | "colors": ["#1CD8D2", "#93EDC7"] 302 | }, 303 | { 304 | "name": "Opa", 305 | "colors": ["#3D7EAA", "#FFE47A"] 306 | }, 307 | { 308 | "name": "Titanium", 309 | "colors": ["#283048", "#859398"] 310 | }, 311 | { 312 | "name": "Mantle", 313 | "colors": ["#24C6DC", "#514A9D"] 314 | }, 315 | { 316 | "name": "Dracula", 317 | "colors": ["#DC2424", "#4A569D"] 318 | }, 319 | { 320 | "name": "Peach", 321 | "colors": ["#ED4264", "#FFEDBC"] 322 | }, 323 | { 324 | "name": "Moonrise", 325 | "colors": ["#DAE2F8", "#D6A4A4"] 326 | }, 327 | { 328 | "name": "Clouds", 329 | "colors": ["#ECE9E6", "#FFFFFF"] 330 | }, 331 | { 332 | "name": "Stellar", 333 | "colors": ["#7474BF", "#348AC7"] 334 | }, 335 | { 336 | "name": "Bourbon", 337 | "colors": ["#EC6F66", "#F3A183"] 338 | }, 339 | { 340 | "name": "Calm Darya", 341 | "colors": ["#5f2c82", "#49a09d"] 342 | }, 343 | { 344 | "name": "Influenza", 345 | "colors": ["#C04848", "#480048"] 346 | }, 347 | { 348 | "name": "Shrimpy", 349 | "colors": ["#e43a15", "#e65245"] 350 | }, 351 | { 352 | "name": "Army", 353 | "colors": ["#414d0b", "#727a17"] 354 | }, 355 | { 356 | "name": "Miaka", 357 | "colors": ["#FC354C", "#0ABFBC"] 358 | }, 359 | { 360 | "name": "Pinot Noir", 361 | "colors": ["#4b6cb7", "#182848"] 362 | }, 363 | { 364 | "name": "Day Tripper", 365 | "colors": ["#f857a6", "#ff5858"] 366 | }, 367 | { 368 | "name": "Namn", 369 | "colors": ["#a73737", "#7a2828"] 370 | }, 371 | { 372 | "name": "Blurry Beach", 373 | "colors": ["#d53369", "#cbad6d"] 374 | }, 375 | { 376 | "name": "Vasily", 377 | "colors": ["#e9d362", "#333333"] 378 | }, 379 | { 380 | "name": "A Lost Memory", 381 | "colors": ["#DE6262", "#FFB88C"] 382 | }, 383 | { 384 | "name": "Petrichor", 385 | "colors": ["#666600", "#999966"] 386 | }, 387 | { 388 | "name": "Jonquil", 389 | "colors": ["#FFEEEE", "#DDEFBB"] 390 | }, 391 | { 392 | "name": "Sirius Tamed", 393 | "colors": ["#EFEFBB", "#D4D3DD"] 394 | }, 395 | { 396 | "name": "Kyoto", 397 | "colors": ["#c21500", "#ffc500"] 398 | }, 399 | { 400 | "name": "Misty Meadow", 401 | "colors": ["#215f00", "#e4e4d9"] 402 | }, 403 | { 404 | "name": "Aqualicious", 405 | "colors": ["#50C9C3", "#96DEDA"] 406 | }, 407 | { 408 | "name": "Moor", 409 | "colors": ["#616161", "#9bc5c3"] 410 | }, 411 | { 412 | "name": "Almost", 413 | "colors": ["#ddd6f3", "#faaca8"] 414 | }, 415 | { 416 | "name": "Forever Lost", 417 | "colors": ["#5D4157", "#A8CABA"] 418 | }, 419 | { 420 | "name": "Winter", 421 | "colors": ["#E6DADA", "#274046"] 422 | }, 423 | { 424 | "name": "Nelson", 425 | "colors": ["#f2709c", "#ff9472"] 426 | }, 427 | { 428 | "name": "Autumn", 429 | "colors": ["#DAD299", "#B0DAB9"] 430 | }, 431 | { 432 | "name": "Candy", 433 | "colors": ["#D3959B", "#BFE6BA"] 434 | }, 435 | { 436 | "name": "Reef", 437 | "colors": ["#00d2ff", "#3a7bd5"] 438 | }, 439 | { 440 | "name": "The Strain", 441 | "colors": ["#870000", "#190A05"] 442 | }, 443 | { 444 | "name": "Dirty Fog", 445 | "colors": ["#B993D6", "#8CA6DB"] 446 | }, 447 | { 448 | "name": "Earthly", 449 | "colors": ["#649173", "#DBD5A4"] 450 | }, 451 | { 452 | "name": "Virgin", 453 | "colors": ["#C9FFBF", "#FFAFBD"] 454 | }, 455 | { 456 | "name": "Ash", 457 | "colors": ["#606c88", "#3f4c6b"] 458 | }, 459 | { 460 | "name": "Cherryblossoms", 461 | "colors": ["#FBD3E9", "#BB377D"] 462 | }, 463 | { 464 | "name": "Parklife", 465 | "colors": ["#ADD100", "#7B920A"] 466 | }, 467 | { 468 | "name": "Dance To Forget", 469 | "colors": ["#FF4E50", "#F9D423"] 470 | }, 471 | { 472 | "name": "Starfall", 473 | "colors": ["#F0C27B", "#4B1248"] 474 | }, 475 | { 476 | "name": "Red Mist", 477 | "colors": ["#000000", "#e74c3c"] 478 | }, 479 | { 480 | "name": "Teal Love", 481 | "colors": ["#AAFFA9", "#11FFBD"] 482 | }, 483 | { 484 | "name": "Neon Life", 485 | "colors": ["#B3FFAB", "#12FFF7"] 486 | }, 487 | { 488 | "name": "Man of Steel", 489 | "colors": ["#780206", "#061161"] 490 | }, 491 | { 492 | "name": "Amethyst", 493 | "colors": ["#9D50BB", "#6E48AA"] 494 | }, 495 | { 496 | "name": "Cheer Up Emo Kid", 497 | "colors": ["#556270", "#FF6B6B"] 498 | }, 499 | { 500 | "name": "Shore", 501 | "colors": ["#70e1f5", "#ffd194"] 502 | }, 503 | { 504 | "name": "Facebook Messenger", 505 | "colors": ["#00c6ff", "#0072ff"] 506 | }, 507 | { 508 | "name": "SoundCloud", 509 | "colors": ["#fe8c00", "#f83600"] 510 | }, 511 | { 512 | "name": "Behongo", 513 | "colors": ["#52c234", "#061700"] 514 | }, 515 | { 516 | "name": "ServQuick", 517 | "colors": ["#485563", "#29323c"] 518 | }, 519 | { 520 | "name": "Friday", 521 | "colors": ["#83a4d4", "#b6fbff"] 522 | }, 523 | { 524 | "name": "Martini", 525 | "colors": ["#FDFC47", "#24FE41"] 526 | }, 527 | { 528 | "name": "Metallic Toad", 529 | "colors": ["#abbaab", "#ffffff"] 530 | }, 531 | { 532 | "name": "Between The Clouds", 533 | "colors": ["#73C8A9", "#373B44"] 534 | }, 535 | { 536 | "name": "Crazy Orange I", 537 | "colors": ["#D38312", "#A83279"] 538 | }, 539 | { 540 | "name": "Hersheys", 541 | "colors": ["#1e130c", "#9a8478"] 542 | }, 543 | { 544 | "name": "Talking To Mice Elf", 545 | "colors": ["#948E99", "#2E1437"] 546 | }, 547 | { 548 | "name": "Purple Bliss", 549 | "colors": ["#360033", "#0b8793"] 550 | }, 551 | { 552 | "name": "Predawn", 553 | "colors": ["#FFA17F", "#00223E"] 554 | }, 555 | { 556 | "name": "Endless River", 557 | "colors": ["#43cea2", "#185a9d"] 558 | }, 559 | { 560 | "name": "Pastel Orange at the Sun", 561 | "colors": ["#ffb347", "#ffcc33"] 562 | }, 563 | { 564 | "name": "Twitch", 565 | "colors": ["#6441A5", "#2a0845"] 566 | }, 567 | { 568 | "name": "Atlas", 569 | "colors": ["#FEAC5E", "#C779D0", "#4BC0C8"] 570 | }, 571 | { 572 | "name": "Instagram", 573 | "colors": ["#833ab4", "#fd1d1d", "#fcb045"] 574 | }, 575 | { 576 | "name": "Flickr", 577 | "colors": ["#ff0084", "#33001b"] 578 | }, 579 | { 580 | "name": "Vine", 581 | "colors": ["#00bf8f", "#001510"] 582 | }, 583 | { 584 | "name": "Turquoise flow", 585 | "colors": ["#136a8a", "#267871"] 586 | }, 587 | { 588 | "name": "Portrait", 589 | "colors": ["#8e9eab", "#eef2f3"] 590 | }, 591 | { 592 | "name": "Virgin America", 593 | "colors": ["#7b4397", "#dc2430"] 594 | }, 595 | { 596 | "name": "Koko Caramel", 597 | "colors": ["#D1913C", "#FFD194"] 598 | }, 599 | { 600 | "name": "Fresh Turboscent", 601 | "colors": ["#F1F2B5", "#135058"] 602 | }, 603 | { 604 | "name": "Green to dark", 605 | "colors": ["#6A9113", "#141517"] 606 | }, 607 | { 608 | "name": "Ukraine", 609 | "colors": ["#004FF9", "#FFF94C"] 610 | }, 611 | { 612 | "name": "Curiosity blue", 613 | "colors": ["#525252", "#3d72b4"] 614 | }, 615 | { 616 | "name": "Dark Knight", 617 | "colors": ["#BA8B02", "#181818"] 618 | }, 619 | { 620 | "name": "Piglet", 621 | "colors": ["#ee9ca7", "#ffdde1"] 622 | }, 623 | { 624 | "name": "Lizard", 625 | "colors": ["#304352", "#d7d2cc"] 626 | }, 627 | { 628 | "name": "Sage Persuasion", 629 | "colors": ["#CCCCB2", "#757519"] 630 | }, 631 | { 632 | "name": "Between Night and Day", 633 | "colors": ["#2c3e50", "#3498db"] 634 | }, 635 | { 636 | "name": "Timber", 637 | "colors": ["#fc00ff", "#00dbde"] 638 | }, 639 | { 640 | "name": "Passion", 641 | "colors": ["#e53935", "#e35d5b"] 642 | }, 643 | { 644 | "name": "Clear Sky", 645 | "colors": ["#005C97", "#363795"] 646 | }, 647 | { 648 | "name": "Master Card", 649 | "colors": ["#f46b45", "#eea849"] 650 | }, 651 | { 652 | "name": "Back To Earth", 653 | "colors": ["#00C9FF", "#92FE9D"] 654 | }, 655 | { 656 | "name": "Deep Purple", 657 | "colors": ["#673AB7", "#512DA8"] 658 | }, 659 | { 660 | "name": "Little Leaf", 661 | "colors": ["#76b852", "#8DC26F"] 662 | }, 663 | { 664 | "name": "Netflix", 665 | "colors": ["#8E0E00", "#1F1C18"] 666 | }, 667 | { 668 | "name": "Light Orange", 669 | "colors": ["#FFB75E", "#ED8F03"] 670 | }, 671 | { 672 | "name": "Green and Blue", 673 | "colors": ["#c2e59c", "#64b3f4"] 674 | }, 675 | { 676 | "name": "Poncho", 677 | "colors": ["#403A3E", "#BE5869"] 678 | }, 679 | { 680 | "name": "Back to the Future", 681 | "colors": ["#C02425", "#F0CB35"] 682 | }, 683 | { 684 | "name": "Blush", 685 | "colors": ["#B24592", "#F15F79"] 686 | }, 687 | { 688 | "name": "Inbox", 689 | "colors": ["#457fca", "#5691c8"] 690 | }, 691 | { 692 | "name": "Purplin", 693 | "colors": ["#6a3093", "#a044ff"] 694 | }, 695 | { 696 | "name": "Pale Wood", 697 | "colors": ["#eacda3", "#d6ae7b"] 698 | }, 699 | { 700 | "name": "Haikus", 701 | "colors": ["#fd746c", "#ff9068"] 702 | }, 703 | { 704 | "name": "Pizelex", 705 | "colors": ["#114357", "#F29492"] 706 | }, 707 | { 708 | "name": "Joomla", 709 | "colors": ["#1e3c72", "#2a5298"] 710 | }, 711 | { 712 | "name": "Christmas", 713 | "colors": ["#2F7336", "#AA3A38"] 714 | }, 715 | { 716 | "name": "Minnesota Vikings", 717 | "colors": ["#5614B0", "#DBD65C"] 718 | }, 719 | { 720 | "name": "Miami Dolphins", 721 | "colors": ["#4DA0B0", "#D39D38"] 722 | }, 723 | { 724 | "name": "Forest", 725 | "colors": ["#5A3F37", "#2C7744"] 726 | }, 727 | { 728 | "name": "Nighthawk", 729 | "colors": ["#2980b9", "#2c3e50"] 730 | }, 731 | { 732 | "name": "Superman", 733 | "colors": ["#0099F7", "#F11712"] 734 | }, 735 | { 736 | "name": "Suzy", 737 | "colors": ["#834d9b", "#d04ed6"] 738 | }, 739 | { 740 | "name": "Dark Skies", 741 | "colors": ["#4B79A1", "#283E51"] 742 | }, 743 | { 744 | "name": "Deep Space", 745 | "colors": ["#000000", "#434343"] 746 | }, 747 | { 748 | "name": "Decent", 749 | "colors": ["#4CA1AF", "#C4E0E5"] 750 | }, 751 | { 752 | "name": "Colors Of Sky", 753 | "colors": ["#E0EAFC", "#CFDEF3"] 754 | }, 755 | { 756 | "name": "Purple White", 757 | "colors": ["#BA5370", "#F4E2D8"] 758 | }, 759 | { 760 | "name": "Ali", 761 | "colors": ["#ff4b1f", "#1fddff"] 762 | }, 763 | { 764 | "name": "Alihossein", 765 | "colors": ["#f7ff00", "#db36a4"] 766 | }, 767 | { 768 | "name": "Shahabi", 769 | "colors": ["#a80077", "#66ff00"] 770 | }, 771 | { 772 | "name": "Red Ocean", 773 | "colors": ["#1D4350", "#A43931"] 774 | }, 775 | { 776 | "name": "Tranquil", 777 | "colors": ["#EECDA3", "#EF629F"] 778 | }, 779 | { 780 | "name": "Transfile", 781 | "colors": ["#16BFFD", "#CB3066"] 782 | }, 783 | 784 | { 785 | "name": "Sylvia", 786 | "colors": ["#ff4b1f", "#ff9068"] 787 | }, 788 | { 789 | "name": "Sweet Morning", 790 | "colors": ["#FF5F6D", "#FFC371"] 791 | }, 792 | { 793 | "name": "Politics", 794 | "colors": ["#2196f3", "#f44336"] 795 | }, 796 | { 797 | "name": "Bright Vault", 798 | "colors": ["#00d2ff", "#928DAB"] 799 | }, 800 | { 801 | "name": "Solid Vault", 802 | "colors": ["#3a7bd5", "#3a6073"] 803 | }, 804 | { 805 | "name": "Sunset", 806 | "colors": ["#0B486B", "#F56217"] 807 | }, 808 | { 809 | "name": "Grapefruit Sunset", 810 | "colors": ["#e96443", "#904e95"] 811 | }, 812 | { 813 | "name": "Deep Sea Space", 814 | "colors": ["#2C3E50", "#4CA1AF"] 815 | }, 816 | { 817 | "name": "Dusk", 818 | "colors": ["#2C3E50", "#FD746C"] 819 | }, 820 | { 821 | "name": "Minimal Red", 822 | "colors": ["#F00000", "#DC281E"] 823 | }, 824 | { 825 | "name": "Royal", 826 | "colors": ["#141E30", "#243B55"] 827 | }, 828 | { 829 | "name": "Mauve", 830 | "colors": ["#42275a", "#734b6d"] 831 | }, 832 | { 833 | "name": "Frost", 834 | "colors": ["#000428", "#004e92"] 835 | }, 836 | { 837 | "name": "Lush", 838 | "colors": ["#56ab2f", "#a8e063"] 839 | }, 840 | { 841 | "name": "Firewatch", 842 | "colors": ["#cb2d3e", "#ef473a"] 843 | }, 844 | { 845 | "name": "Sherbert", 846 | "colors": ["#f79d00", "#64f38c"] 847 | }, 848 | { 849 | "name": "Blood Red", 850 | "colors": ["#f85032", "#e73827"] 851 | }, 852 | { 853 | "name": "Sun on the Horizon", 854 | "colors": ["#fceabb", "#f8b500"] 855 | }, 856 | { 857 | "name": "IIIT Delhi", 858 | "colors": ["#808080", "#3fada8"] 859 | }, 860 | { 861 | "name": "Jupiter", 862 | "colors": ["#ffd89b", "#19547b"] 863 | }, 864 | { 865 | "name": "50 Shades of Grey", 866 | "colors": ["#bdc3c7", "#2c3e50"] 867 | }, 868 | { 869 | "name": "Dania", 870 | "colors": ["#BE93C5", "#7BC6CC"] 871 | }, 872 | { 873 | "name": "Limeade", 874 | "colors": ["#A1FFCE", "#FAFFD1"] 875 | }, 876 | { 877 | "name": "Disco", 878 | "colors": ["#4ECDC4", "#556270"] 879 | }, 880 | { 881 | "name": "Love Couple", 882 | "colors": ["#3a6186", "#89253e"] 883 | }, 884 | { 885 | "name": "Azure Pop", 886 | "colors": ["#ef32d9", "#89fffd"] 887 | }, 888 | { 889 | "name": "Nepal", 890 | "colors": ["#de6161", "#2657eb"] 891 | }, 892 | { 893 | "name": "Cosmic Fusion", 894 | "colors": ["#ff00cc", "#333399"] 895 | }, 896 | { 897 | "name": "Snapchat", 898 | "colors": ["#fffc00", "#ffffff"] 899 | }, 900 | { 901 | "name": "Ed's Sunset Gradient", 902 | "colors": ["#ff7e5f", "#feb47b"] 903 | }, 904 | { 905 | "name": "Brady Brady Fun Fun", 906 | "colors": ["#00c3ff", "#ffff1c"] 907 | }, 908 | { 909 | "name": "Black Rosé", 910 | "colors": ["#f4c4f3", "#fc67fa"] 911 | }, 912 | { 913 | "name": "80's Purple", 914 | "colors": ["#41295a", "#2F0743"] 915 | }, 916 | { 917 | "name": "Radar", 918 | "colors": ["#A770EF", "#CF8BF3", "#FDB99B"] 919 | }, 920 | { 921 | "name": "Ibiza Sunset", 922 | "colors": ["#ee0979", "#ff6a00"] 923 | }, 924 | { 925 | "name": "Dawn", 926 | "colors": ["#F3904F", "#3B4371"] 927 | }, 928 | { 929 | "name": "Mild", 930 | "colors": ["#67B26F", "#4ca2cd"] 931 | }, 932 | { 933 | 934 | "name": "Vice City", 935 | "colors": ["#3494E6", "#EC6EAD"] 936 | }, 937 | { 938 | "name": "Jaipur", 939 | "colors": ["#DBE6F6", "#C5796D"] 940 | 941 | }, 942 | { 943 | "name": "Jodhpur", 944 | "colors": ["#9CECFB", "#65C7F7", "#0052D4"] 945 | 946 | }, 947 | { 948 | "name": "Cocoaa Ice", 949 | "colors": ["#c0c0aa", "#1cefff"] 950 | }, 951 | { 952 | "name": "EasyMed", 953 | "colors": ["#DCE35B", "#45B649"] 954 | }, 955 | { 956 | "name": "Rose Colored Lenses", 957 | "colors": ["#E8CBC0", "#636FA4"] 958 | }, 959 | { 960 | "name": "What lies Beyond", 961 | "colors": ["#F0F2F0", "#000C40"] 962 | }, 963 | { 964 | "name": "Roseanna", 965 | "colors": ["#FFAFBD", "#ffc3a0"] 966 | }, 967 | { 968 | "name": "Honey Dew", 969 | "colors": ["#43C6AC", "#F8FFAE"] 970 | }, 971 | { 972 | "name": "Under the Lake", 973 | "colors": ["#093028", "#237A57"] 974 | }, 975 | { 976 | "name": "The Blue Lagoon", 977 | "colors": ["#43C6AC", "#191654"] 978 | }, 979 | { 980 | "name": "Can You Feel The Love Tonight", 981 | "colors": ["#4568DC", "#B06AB3"] 982 | }, 983 | { 984 | "name": "Very Blue", 985 | "colors": ["#0575E6", "#021B79"] 986 | }, 987 | { 988 | "name": "Love and Liberty", 989 | "colors": ["#200122", "#6f0000"] 990 | }, 991 | { 992 | "name": "Orca", 993 | "colors": ["#44A08D", "#093637"] 994 | }, 995 | { 996 | "name": "Venice", 997 | "colors": ["#6190E8", "#A7BFE8"] 998 | }, 999 | { 1000 | "name": "Pacific Dream", 1001 | "colors": ["#34e89e", "#0f3443"] 1002 | }, 1003 | { 1004 | "name": "Learning and Leading", 1005 | "colors": ["#F7971E", "#FFD200"] 1006 | }, 1007 | { 1008 | "name": "Celestial", 1009 | "colors": ["#C33764", "#1D2671"] 1010 | }, 1011 | { 1012 | "name": "Purplepine", 1013 | "colors": ["#20002c", "#cbb4d4"] 1014 | }, 1015 | { 1016 | "name": "Sha la la", 1017 | "colors": ["#D66D75", "#E29587"] 1018 | }, 1019 | { 1020 | "name": "Mini", 1021 | "colors": ["#30E8BF", "#FF8235"] 1022 | }, 1023 | { 1024 | "name": "Maldives", 1025 | "colors": ["#B2FEFA", "#0ED2F7"] 1026 | }, 1027 | { 1028 | "name": "Cinnamint", 1029 | "colors": ["#4AC29A", "#BDFFF3"] 1030 | }, 1031 | { 1032 | "name": "Html", 1033 | "colors": ["#E44D26", "#F16529"] 1034 | }, 1035 | { 1036 | "name": "Coal", 1037 | "colors": ["#EB5757", "#000000"] 1038 | }, 1039 | { 1040 | "name": "Sunkist", 1041 | "colors": ["#F2994A", "#F2C94C"] 1042 | }, 1043 | { 1044 | "name": "Blue Skies", 1045 | "colors": ["#56CCF2", "#2F80ED"] 1046 | }, 1047 | { 1048 | "name": "Chitty Chitty Bang Bang", 1049 | "colors": ["#007991", "#78ffd6"] 1050 | }, 1051 | { 1052 | "name": "Visions of Grandeur", 1053 | "colors": ["#000046", "#1CB5E0"] 1054 | }, 1055 | { 1056 | "name": "Crystal Clear", 1057 | "colors": ["#159957", "#155799"] 1058 | }, 1059 | { 1060 | "name": "Mello", 1061 | "colors": ["#c0392b", "#8e44ad"] 1062 | }, 1063 | { 1064 | "name": "Compare Now", 1065 | "colors": ["#EF3B36", "#FFFFFF"] 1066 | }, 1067 | { 1068 | "name": "Meridian", 1069 | "colors": ["#283c86", "#45a247"] 1070 | }, 1071 | { 1072 | "name": "Relay", 1073 | "colors": ["#3A1C71", "#D76D77", "#FFAF7B"] 1074 | }, 1075 | { 1076 | "name": "Alive", 1077 | "colors": ["#CB356B", "#BD3F32"] 1078 | }, 1079 | { 1080 | "name": "Scooter", 1081 | "colors": ["#36D1DC", "#5B86E5"] 1082 | }, 1083 | { 1084 | "name": "Terminal", 1085 | "colors": ["#000000", "#0f9b0f"] 1086 | }, 1087 | { 1088 | "name": "Telegram", 1089 | "colors": ["#1c92d2", "#f2fcfe"] 1090 | }, 1091 | { 1092 | "name": "Crimson Tide", 1093 | "colors": ["#642B73", "#C6426E"] 1094 | }, 1095 | { 1096 | "name": "Socialive", 1097 | "colors": ["#06beb6", "#48b1bf"] 1098 | }, 1099 | { 1100 | "name": "Subu", 1101 | "colors": ["#0cebeb", "#20e3b2", "#29ffc6"] 1102 | }, 1103 | { 1104 | "name": "Broken Hearts", 1105 | "colors": ["#d9a7c7", "#fffcdc"] 1106 | }, 1107 | { 1108 | "name": "Kimoby Is The New Blue", 1109 | "colors": ["#396afc", "#2948ff"] 1110 | }, 1111 | { 1112 | "name": "Dull", 1113 | "colors": ["#C9D6FF", "#E2E2E2"] 1114 | }, 1115 | { 1116 | "name": "Purpink", 1117 | "colors": ["#7F00FF", "#E100FF"] 1118 | }, 1119 | { 1120 | "name": "Orange Coral", 1121 | "colors": ["#ff9966", "#ff5e62"] 1122 | }, 1123 | { 1124 | "name": "Summer", 1125 | "colors": ["#22c1c3", "#fdbb2d"] 1126 | }, 1127 | { 1128 | "name": "King Yna", 1129 | "colors": ["#1a2a6c", "#b21f1f", "#fdbb2d"] 1130 | }, 1131 | { 1132 | "name": "Velvet Sun", 1133 | "colors": ["#e1eec3", "#f05053"] 1134 | }, 1135 | { 1136 | "name": "Zinc", 1137 | "colors": ["#ADA996", "#F2F2F2", "#DBDBDB", "#EAEAEA"] 1138 | }, 1139 | { 1140 | "name": "Hydrogen", 1141 | "colors": ["#667db6", "#0082c8", "#0082c8", "#667db6"] 1142 | }, 1143 | { 1144 | "name": "Argon", 1145 | "colors": ["#03001e", "#7303c0", "#ec38bc", "#fdeff9"] 1146 | }, 1147 | { 1148 | "name": "Lithium", 1149 | "colors": ["#6D6027", "#D3CBB8"] 1150 | }, 1151 | { 1152 | "name": "Digital Water", 1153 | "colors": ["#74ebd5","#ACB6E5"] 1154 | }, 1155 | { 1156 | "name": "Orange Fun", 1157 | "colors": ["#fc4a1a", "#f7b733"] 1158 | }, 1159 | { 1160 | "name": "Rainbow Blue", 1161 | "colors": ["#00F260", "#0575E6"] 1162 | }, 1163 | { 1164 | "name": "Pink Flavour", 1165 | "colors": ["#800080", "#ffc0cb"] 1166 | }, 1167 | { 1168 | "name": "Sulphur", 1169 | "colors": ["#CAC531", "#F3F9A7"] 1170 | }, 1171 | { 1172 | "name": "Selenium", 1173 | "colors": ["#3C3B3F", "#605C3C"] 1174 | }, 1175 | { 1176 | "name": "Delicate", 1177 | "colors": ["#D3CCE3", "#E9E4F0"] 1178 | }, 1179 | { 1180 | 1181 | "name": "Ohhappiness", 1182 | "colors": ["#00b09b", "#96c93d"] 1183 | }, 1184 | { 1185 | "name": "Lawrencium", 1186 | "colors": ["#0f0c29", "#302b63", "#24243e"] 1187 | }, 1188 | { 1189 | "name": "Relaxing red", 1190 | "colors": ["#fffbd5", "#b20a2c"] 1191 | }, 1192 | { 1193 | "name": "Taran Tado", 1194 | "colors": ["#23074d", "#cc5333"] 1195 | }, 1196 | { 1197 | "name": "Bighead", 1198 | "colors": ["#c94b4b", "#4b134f"] 1199 | }, 1200 | { 1201 | "name": "Sublime Vivid", 1202 | "colors": ["#FC466B", "#3F5EFB"] 1203 | }, 1204 | { 1205 | "name": "Sublime Light", 1206 | "colors": ["#FC5C7D", "#6A82FB"] 1207 | }, 1208 | { 1209 | "name": "Pun Yeta", 1210 | "colors": ["#108dc7", "#ef8e38"] 1211 | }, 1212 | { 1213 | "name": "Quepal", 1214 | "colors": ["#11998e", "#38ef7d"] 1215 | }, 1216 | { 1217 | "name": "Sand to Blue", 1218 | "colors": ["#3E5151", "#DECBA4"] 1219 | }, 1220 | { 1221 | "name": "Wedding Day Blues", 1222 | "colors": ["#40E0D0", "#FF8C00", "#FF0080"] 1223 | }, 1224 | { 1225 | "name": "Shifter", 1226 | "colors": ["#bc4e9c", "#f80759"] 1227 | }, 1228 | { 1229 | "name": "Red Sunset", 1230 | "colors": ["#355C7D", "#6C5B7B", "#C06C84"] 1231 | }, 1232 | { 1233 | "name": "Moon Purple", 1234 | "colors": ["#4e54c8", "#8f94fb"] 1235 | }, 1236 | { 1237 | "name": "Pure Lust", 1238 | "colors": ["#333333", "#dd1818"] 1239 | }, 1240 | { 1241 | "name": "Slight Ocean View", 1242 | "colors": ["#a8c0ff", "#3f2b96"] 1243 | }, 1244 | { 1245 | "name": "eXpresso", 1246 | "colors": ["#ad5389", "#3c1053"] 1247 | }, 1248 | { 1249 | "name": "Shifty", 1250 | "colors": ["#636363", "#a2ab58"] 1251 | }, 1252 | { 1253 | "name": "Vanusa", 1254 | "colors": ["#DA4453", "#89216B"] 1255 | }, 1256 | { 1257 | "name": "Evening Night", 1258 | "colors": ["#005AA7", "#FFFDE4"] 1259 | }, 1260 | { 1261 | "name": "Magic", 1262 | "colors": ["#59C173", "#a17fe0", "#5D26C1"] 1263 | }, 1264 | { 1265 | "name": "Margo", 1266 | "colors": ["#FFEFBA", "#FFFFFF"] 1267 | }, 1268 | { 1269 | "name": "Blue Raspberry", 1270 | "colors": ["#00B4DB", "#0083B0"] 1271 | }, 1272 | { 1273 | "name": "Citrus Peel", 1274 | "colors": ["#FDC830", "#F37335"] 1275 | }, 1276 | { 1277 | "name": "Sin City Red", 1278 | "colors": ["#ED213A", "#93291E"] 1279 | }, 1280 | { 1281 | "name": "Rastafari", 1282 | "colors": ["#1E9600", "#FFF200", "#FF0000"] 1283 | }, 1284 | { 1285 | "name": "Summer Dog", 1286 | "colors": ["#a8ff78", "#78ffd6"] 1287 | }, 1288 | { 1289 | "name": "Wiretap", 1290 | "colors": ["#8A2387", "#E94057", "#F27121"] 1291 | }, 1292 | { 1293 | "name": "Burning Orange", 1294 | "colors": ["#FF416C", "#FF4B2B"] 1295 | }, 1296 | { 1297 | "name": "Ultra Voilet", 1298 | "colors": ["#654ea3", "#eaafc8"] 1299 | }, 1300 | { 1301 | "name": "By Design", 1302 | "colors": ["#009FFF", "#ec2F4B"] 1303 | }, 1304 | { 1305 | "name": "Kyoo Tah", 1306 | "colors": ["#544a7d", "#ffd452"] 1307 | }, 1308 | { 1309 | "name": "Kye Meh", 1310 | "colors": ["#8360c3", "#2ebf91"] 1311 | }, 1312 | { 1313 | "name": "Kyoo Pal", 1314 | "colors": ["#dd3e54", "#6be585"] 1315 | }, 1316 | { 1317 | "name": "Metapolis", 1318 | "colors": ["#659999", "#f4791f"] 1319 | }, 1320 | { 1321 | "name": "Flare", 1322 | "colors": ["#f12711", "#f5af19"] 1323 | }, 1324 | { 1325 | "name": "Witching Hour", 1326 | "colors": ["#c31432", "#240b36"] 1327 | }, 1328 | { 1329 | "name": "Azur Lane", 1330 | "colors": ["#7F7FD5", "#86A8E7", "#91EAE4"] 1331 | }, 1332 | { 1333 | "name": "Neuromancer", 1334 | "colors": ["#f953c6", "#b91d73"] 1335 | }, 1336 | { 1337 | "name": "Harvey", 1338 | "colors": ["#1f4037", "#99f2c8"] 1339 | }, 1340 | { 1341 | "name": "Amin", 1342 | "colors": ["#8E2DE2", "#4A00E0"] 1343 | }, 1344 | { 1345 | "name": "Memariani", 1346 | "colors": ["#aa4b6b", "#6b6b83" , "#3b8d99"] 1347 | }, 1348 | { 1349 | "name": "Yoda", 1350 | "colors": ["#FF0099", "#493240"] 1351 | }, 1352 | { 1353 | "name": "Cool Sky", 1354 | "colors": ["#2980B9", "#6DD5FA", "#FFFFFF"] 1355 | }, 1356 | { 1357 | "name": "Dark Ocean", 1358 | "colors": ["#373B44", "#4286f4"] 1359 | }, 1360 | { 1361 | "name": "Evening Sunshine", 1362 | "colors": ["#b92b27", "#1565C0"] 1363 | }, 1364 | { 1365 | "name": "JShine", 1366 | "colors": ["#12c2e9", "#c471ed", "#f64f59"] 1367 | }, 1368 | { 1369 | "name": "Moonlit Asteroid", 1370 | "colors": ["#0F2027", "#203A43", "#2C5364"] 1371 | }, 1372 | { 1373 | "name": "MegaTron", 1374 | "colors": ["#C6FFDD", "#FBD786", "#f7797d"] 1375 | }, 1376 | { 1377 | "name": "Cool Blues", 1378 | "colors": ["#2193b0", "#6dd5ed"] 1379 | }, 1380 | { 1381 | "name": "Piggy Pink", 1382 | "colors": ["#ee9ca7", "#ffdde1"] 1383 | }, 1384 | { 1385 | "name": "Grade Grey", 1386 | "colors": ["#bdc3c7","#2c3e50"] 1387 | }, 1388 | { 1389 | "name": "Telko", 1390 | "colors": ["#F36222", "#5CB644", "#007FC3"] 1391 | }, 1392 | { 1393 | "name": "Zenta", 1394 | "colors": ["#2A2D3E","#FECB6E"] 1395 | }, 1396 | { 1397 | "name": "Electric Peacock", 1398 | "colors": ["#8a2be2","#0000cd","#228b22","#ccff00"] 1399 | }, 1400 | { 1401 | "name": "Under Blue Green", 1402 | "colors": ["#051937","#004d7a","#008793","#00bf72","#a8eb12"] 1403 | }, 1404 | { 1405 | "name": "Lensod", 1406 | "colors": ["#6025F5","#FF5555"] 1407 | }, 1408 | { 1409 | "name": "Newspaper", 1410 | "colors": ["#8a2be2","#ffa500","#f8f8ff"] 1411 | }, 1412 | { 1413 | "name": "Dark Blue Gradient", 1414 | "colors": ["#2774ae", "#002E5D", "#002E5D"] 1415 | }, 1416 | { 1417 | "name": "Dark Blu Two", 1418 | "colors": ["#004680","#4484BA"] 1419 | }, 1420 | { 1421 | "name": "Lemon Lime", 1422 | "colors":["#7ec6bc","#ebe717"] 1423 | }, 1424 | { 1425 | "name": "Beleko", 1426 | "colors": ["#ff1e56", "#f9c942", "#1e90ff"] 1427 | }, 1428 | { 1429 | "name": "Mango Papaya", 1430 | "colors": ["#de8a41","#2ada53"] 1431 | }, 1432 | { 1433 | "name": "Unicorn Rainbow", 1434 | "colors": ["#f7f0ac","#acf7f0","#f0acf7"] 1435 | }, 1436 | { 1437 | "name": "Flame", 1438 | "colors": ["#ff0000", "#fdcf58"] 1439 | }, 1440 | { 1441 | "name": "Blue Red", 1442 | "colors": ["#36B1C7", "#960B33"] 1443 | }, 1444 | { 1445 | "name" : "Twitter", 1446 | "colors" : ["#1DA1F2", "#009ffc"] 1447 | }, 1448 | { 1449 | "name": "Blooze", 1450 | "colors": ["#6da6be", "#4b859e", "#6da6be"] 1451 | }, 1452 | { 1453 | "name": "Blue Slate", 1454 | "colors": ["#B5B9FF", "#2B2C49"] 1455 | }, 1456 | { 1457 | "name": "Space Light Green", 1458 | "colors": ["#9FA0A8", "#5C7852"] 1459 | }, 1460 | { 1461 | "name": "Flower", 1462 | "colors": ["#DCFFBD", "#CC86D1"] 1463 | }, 1464 | { 1465 | "name": "Elate The Euge", 1466 | "colors": ["#8BDEDA", "43ADD0", "998EE0", "E17DC2", "EF9393"] 1467 | }, 1468 | { 1469 | "name": "Peach Sea", 1470 | "colors": ["#E6AE8C", "#A8CECF"] 1471 | }, 1472 | { 1473 | "name": "Abbas", 1474 | "colors": ["#00fff0","#0083fe"] 1475 | }, 1476 | { 1477 | "name": "Winter Woods", 1478 | "colors": ["#333333", "#a2ab58", "#A43931"] 1479 | }, 1480 | { 1481 | "name": "Ameena", 1482 | "colors": ["#0c0c6d", "#de512b", "#98d0c1", "#5bb226", "#023c0d"] 1483 | }, 1484 | { 1485 | "name": "Emerald Sea", 1486 | "colors": ["#05386b","#5cdb95"] 1487 | }, 1488 | { 1489 | "name": "Bleem", 1490 | "colors": ["#4284DB", "#29EAC4"] 1491 | }, 1492 | { 1493 | "name": "Coffee Gold", 1494 | "colors": ["#554023", "#c99846"] 1495 | }, 1496 | { 1497 | "name": "Compass", 1498 | "colors": ["#516b8b", "#056b3b"] 1499 | }, 1500 | { 1501 | "name": "Andreuzza's", 1502 | "colors": ["#D70652", "#FF025E"] 1503 | }, 1504 | { 1505 | "name": "Moonwalker", 1506 | "colors": ["#152331", "#000000"] 1507 | }, 1508 | { 1509 | "name": "Whinehouse", 1510 | "colors": ["#f7f7f7", "#b9a0a0", "#794747", "#4e2020", "#111111"] 1511 | }, 1512 | { 1513 | "name": "Hyper Blue", 1514 | "colors": ["#59CDE9", "#0A2A88"] 1515 | }, 1516 | { 1517 | "name": "Racker", 1518 | "colors": ["#EB0000","#95008A","#3300FC"] 1519 | }, 1520 | { 1521 | "name": "After the Rain", 1522 | "colors": ["#ff75c3", "#ffa647", "#ffe83f", "#9fff5b", "#70e2ff", "#cd93ff"] 1523 | }, 1524 | { 1525 | "name": "Neon Green", 1526 | "colors": ["#81ff8a", "#64965e"] 1527 | }, 1528 | { 1529 | "name": "Dusty Grass", 1530 | "colors": ["#d4fc79", "#96e6a1"] 1531 | }, 1532 | { 1533 | "name": "Visual Blue", 1534 | "colors": ["#003d4d", "#00c996"] 1535 | } 1536 | ] 1537 | --------------------------------------------------------------------------------