Keep your eyes peeled for them by regularly checking out X-Team's blog or by subscribing to the X-Team Weekly newsletter. More articles about my other tools are soon to follow. Once again, you can find the repository of all my other open-source tools here. It also has some other nice things, such as a Snackbar when a user clicks a color.
#Color palette generator code#
For more context, you can find the repository with all implementation details and all the code here.
That's it! You've created your own color palette generator. It will copy the palette value to your clipboard so you can use it in your project. To do so, create a file (a pretty important config file - find out more here) in the root of the project with the following code: export default `) To control that, you'll need to either kill the app running on 3000 or set another port. If the port is already in use, Nuxt will grab a random port to host the app.
By default, Nuxt will run on localhost:3000. You can run the project with npm run dev or yarn dev. Nuxt requires a strict structure for it to work (check that out here) so we'll need to create a pages folder:Ĭreate an index.vue file with the following code: Yarn add nuxt Step 2: Create Your Folder Structure Navigate to palette-picker-generator this way: To begin with, you'll need an empty folder somewhere in your system: Yarn create nuxt-app color-palette-generatorīut, for the sake of simplicity, I'll start a project from scratch. Npx create-nuxt-app color-palette-generator If you want the project structure to be built automatically, you can type the following: You can create a Nuxt project from npx or yarn. The framework has awesome tooling too, so the development process is very enjoyable, and Nuxt works well enough for a project that should be SEO-friendly. It makes it easier to create universal apps that can execute on both client- and server-side, because it gives us methods like asyncData and because it provides access to properties like isClient or isServer. Nuxt is an outstanding tool developed on top of Vue.
Click here to get an idea of what the end result will look like. I wanted something where I could pick a color - at random or not - and generate a color palette right away. I created this tool because I no longer wanted to waste time searching for a nice color palette every time I needed one.
#Color palette generator generator#
In this article, I will explain how you too can build a color palette generator using Nuxt and Vuetify. This color palette generator is one of them. It’s a technique I consider to be one of those: “why didn’t I think of this sooner”.Over the course of my career as a front-end developer, I built several open-source tools to make my life easier. This is something I find less tedious than selecting the object, opening the fill window and pasting the value elsewhere. That’s all you need to know, you’ve got your hex codes. The order each colour is should be how you made them in Illustrator. Search for a gorgeous stock photo to start with, or upload your own image. If you like this color palette generator, you might like . Create a color palette from an image in a hot second. This is useful for coming up with a website color scheme that matches a stock photo a client wants to work with. #FF7E6DĮach colour should correspond with Illustrator Enter the URL of an image to get a color palette that matches the image.
Delete the rest, paste it back in and tidy it up so you have the hex codes left. Yours will resemble something similar to this code. It doesn’t matter what app you use here you need something to paste in what you’ve copied. This will copy an SVG version of your colour palette to the clipboard. A simple set of shapes is all that is needed. If you don’t draw some shapes now with each of your colours. You may be using swatches already, or have a bunch of shapes which are filled with the colours. Here’s a way to export your colours quickly. These palette limitations make GIF less suitable for reproducing. It’s tedious to go through the usual object, click fill, copy and paste routine. It also supports animations and allows a separate palette of up to 256 colors for each frame. Using swatches gives you access to everything except hex. In Illustrator it seems to be more difficult than it needs to be to export a colour palette to hex values.
0 kommentar(er)
