The latest articles on DEV Community by colorswall (@colorswall). https://dev.to/colorswall https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F79476%2F0ea7abbb-610d-48c6-80b0-3064615a8763.jpg https://dev.to/colorswall en colorswall Wed, 29 Mar 2023 11:35:10 +0000 https://dev.to/colorswall/compare-colors-palettes-2ehl https://dev.to/colorswall/compare-colors-palettes-2ehl <p>How to <a href="https://colorswall.com/palettes/compare?ids=42620,42654,42656,42621">Compare Colors Palettes</a></p> <ol> <li><p>Navigate to <a href="https://colorswall.com/search?q=blue">Search</a> page.<br> Click on "Compare" icon to add Palette in Compare List</p></li> <li><p>Click on "Compare" icon to add Palette in Compare List<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FWJgMIrp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://colorswall.com/images/help/palettes-compare/add.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FWJgMIrp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://colorswall.com/images/help/palettes-compare/add.jpg" alt="Compare Icon" width="800" height="208"></a></p></li> <li><p>Use controls to change layout view, border of palettes, size of colors<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--xA4KzqBY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://colorswall.com/images/help/palettes-compare/controls.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xA4KzqBY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://colorswall.com/images/help/palettes-compare/controls.jpg" alt="Controls" width="682" height="531"></a></p></li> <li><p>Use Drag&amp;drop to change palettes order</p></li> <li><p>Press "Compare" button to naviage Compare Color Palettes page and use favorite palette<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6s2pL0cZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://colorswall.com/images/help/palettes-compare/finish.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6s2pL0cZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://colorswall.com/images/help/palettes-compare/finish.png" alt="Compare Action" width="682" height="468"></a></p></li> </ol> <p>Video version<br> <iframe width="710" height="399" src="https://www.youtube.com/embed/MLtY70mK-HE"> </iframe> </p> colors palette compare webdev colorswall Thu, 27 Aug 2020 08:18:28 +0000 https://dev.to/colorswall/convert-rgb-to-hex-334n https://dev.to/colorswall/convert-rgb-to-hex-334n <ol> <li>Visit page <a href="https://colorswall.com/colors/tools" rel="noopener noreferrer">Convert RGB to HEX color</a> page.</li> <li><p>Adjust Red, Green, Blue slider or input values.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fhex-to-rgb%2Fhex2rgb-adjust.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fhex-to-rgb%2Fhex2rgb-adjust.png" alt="Convert RGB to HEX color adjust"></a></p></li> <li><p>Copy Hex color value from Result section<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fhex-to-rgb%2Fhex2rgb-result.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fhex-to-rgb%2Fhex2rgb-result.png" alt="Convert RGB to HEX color result"></a></p></li> </ol> <p>Video version<br> <iframe width="710" height="399" src="https://www.youtube.com/embed/BsgWPel9jfI"> </iframe> </p> hex color rgb design colorswall Tue, 09 Jun 2020 08:54:26 +0000 https://dev.to/colorswall/customize-bootstrap-4-colors-for-website-project-scss-variables-ljc https://dev.to/colorswall/customize-bootstrap-4-colors-for-website-project-scss-variables-ljc <p>Customize Bootstrap 4 colors for website project, SCSS variables</p> <ol> <li>Visit <a href="https://colorswall.com/palettes" rel="noopener noreferrer">Palettes</a> page.</li> <li><p>Choose "Bootstrap 4 colors" palette press "Edit Copy" button <a href="https://colorswall.com/palette/generate/o/64498" rel="noopener noreferrer">https://colorswall.com/palette/generate/o/64498</a>.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fpalette%2Fclone%2Fpalette-clone.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fpalette%2Fclone%2Fpalette-clone.png" alt="Clone palette"></a></p></li> <li><p>Adjust palette colors.<br> Play with slider and change RGB colors.<br> Drag and drop or remove color.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fpalette%2Fclone%2Fcustomize-color.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fpalette%2Fclone%2Fcustomize-color.png" alt="Clone palette"></a></p></li> <li><p>When your palette is ready press "Save" button.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fpalette%2Fclone%2Fpalette-save.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fpalette%2Fclone%2Fpalette-save.png" alt="Palette save"></a></p></li> <li><p>Visit <a href="https://colorswall.com/palettes" rel="noopener noreferrer">Palettes</a> page and find your palette (<a href="https://colorswall.com/palette/64498" rel="noopener noreferrer">Bootstrap 4 colors palette my website</a>).</p></li> <li><p>Open palette and press "Exprot Button".<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fpalette%2Fclone%2Fexport-button.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fpalette%2Fclone%2Fexport-button.png" alt="Export SCSS variables button"></a></p></li> <li><p>Choose "SCSS" or "LESS" and press "Download" button.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fpalette%2Fclone%2Fexport-download.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fhelp%2Fpalette%2Fclone%2Fexport-download.png" alt="Download SCSS variables button"></a></p></li> <li><p>Import "colorswall_bootstrap-4-colors-palette-my-website.scss" file with varibale to your project.</p></li> </ol> <p>Video version<br> <iframe width="710" height="399" src="https://www.youtube.com/embed/90FV8Rdtwzw"> </iframe> </p> colors palette bootstrap4 scss colorswall Tue, 11 Feb 2020 12:35:02 +0000 https://dev.to/colorswall/quick-palette-tool-3681 https://dev.to/colorswall/quick-palette-tool-3681 <ol> <li>Visit <a href="http://colorswall.com/colors/wall">Colors Wall</a> page.</li> <li><p>Press "Quick Palette" button <br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--m86x6Tmt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/help/quick-palette/quick-palette.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--m86x6Tmt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/help/quick-palette/quick-palette.png" alt="Quick Palette toggle button"></a></p></li> <li><p>Click on any color to add in Quick Palette.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s---fvlBc85--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/help/quick-palette/step-1.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s---fvlBc85--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/help/quick-palette/step-1.png" alt="Quick Palette add color"></a></p></li> <li><p>Adjust palette colors.<br> Drag and drop or remove color.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--HonYVMUj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/help/quick-palette/drag.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--HonYVMUj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/help/quick-palette/drag.png" alt="Quick Palette drag"></a></p></li> <li><p>Customize on advanced editor and add name for palette.</p></li> <li><p>Save your palette.</p></li> </ol> <p>Video version<br> <iframe width="710" height="399" src="https://www.youtube.com/embed/1nVWL-Srbhs"> </iframe> </p> web color palette design colorswall Wed, 28 Aug 2019 11:15:39 +0000 https://dev.to/colorswall/get-complementary-color-64d https://dev.to/colorswall/get-complementary-color-64d <ol> <li>Visit <a href="https://colorswall.com/palette/generate" rel="noopener noreferrer">generate colors tool</a> </li> <li><p>Choose primary color for example #4585ed<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fcolorswall_screenshot_5.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fcolorswall_screenshot_5.png" alt="Choose primary color for Complementary color palette"></a></p></li> <li><p>Open "Customize palette" panel<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fcolorswall_screenshot_7.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fcolorswall_screenshot_7.png" alt="Customize palette"></a></p></li> <li><p>Press "Complementary" button in section "Color scheme".<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fcolorswall_screenshot_6.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fcolorswall_screenshot_6.png" alt="Customize palette"></a></p></li> <li><p>Complementary color is generated<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fcomplementary_blue_color.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcolorswall.com%2Fimages%2Fcomplementary_blue_color.jpg" alt="Complementary color palette"></a></p></li> <li><p>Save palette</p></li> </ol> <p>Check live palette <a href="https://colorswall.com/palette/5043" rel="noopener noreferrer">complementary blue color</a></p> <p>Video version<br> <iframe width="710" height="399" src="https://www.youtube.com/embed/ynPaA_NUS7g"> </iframe> </p> complementary color palette design colorswall Tue, 28 Aug 2018 07:50:44 +0000 https://dev.to/colorswall/generate-colors-palette-from-an-image-3d2e https://dev.to/colorswall/generate-colors-palette-from-an-image-3d2e <ol> <li><p>Choose and download your favorite image (example <a href="https://unsplash.com/photos/h1tRqt0kh8E">unsplash image</a>).</p></li> <li><p>Visit <a href="https://colorswall.com/palette/generate">colors generate tool</a>.</p></li> <li><p>Click on "Pick colors palette from image" icon.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5RBGH2KG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/from_image/from_image_icon.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5RBGH2KG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/from_image/from_image_icon.png" alt="Generate color from an image"></a></p></li> <li><p>Press button "Ok".<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZdOkmC8O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/from_image/from_image_with_image.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZdOkmC8O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/from_image/from_image_with_image.png" alt="Colors from image"></a></p></li> <li><p>Enjoy your new palette.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gEJpGi0x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/from_image/result.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gEJpGi0x--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/from_image/result.png" alt="Image colors palette result"></a></p></li> </ol> <p>Video version<br> <iframe width="710" height="399" src="https://www.youtube.com/embed/ViNT-UZth_8"> </iframe> </p> colors palettes images colorswall Tue, 07 Aug 2018 15:07:04 +0000 https://dev.to/colorswall/create-color-tintsshades-37fj https://dev.to/colorswall/create-color-tintsshades-37fj <p>Web tool colorswall allows you to create tints/shades for colors in one click</p> <ol> <li>Visit <a href="https://colorswall.com/palette/generate">generate colors tool</a> </li> <li>Choose primary color for example #5a53cb <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TUtuhfGa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/colorswall_screenshot_1.png" alt="Primary color for tints/shades"> </li> <li>Open "Customize palette" panel <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9x0L6CZw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/colorswall_screenshot_2.png" alt="Customize palette"> </li> <li>Play around with step input value.</li> <li>Press Tints/Shades button to create colors palette.</li> </ol> <p><a href="https://www.youtube.com/watch?v=FDzbieV9mU4">Video Tutorial</a></p> <p>Results: </p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2k2sl5ky--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/colorswall_screenshot_3.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2k2sl5ky--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/colorswall_screenshot_3.png" alt="Blue tints plaette"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--dTXhPRY3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/colorswall_screenshot_4.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--dTXhPRY3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://colorswall.com/images/colorswall_screenshot_4.png" alt="Blue shades palette"></a></p> <p>Video version<br> <iframe width="710" height="399" src="https://www.youtube.com/embed/FDzbieV9mU4"> </iframe> </p> tints shades palette colors colorswall Fri, 03 Aug 2018 11:15:26 +0000 https://dev.to/colorswall/export-colors-palette-to-scsslesscss-variables-file-1h0o https://dev.to/colorswall/export-colors-palette-to-scsslesscss-variables-file-1h0o <ol> <li>Find your palette or create new one.</li> <li>Open Link with palette (example: <a href="https://colorswall.com/palette/3" rel="noopener noreferrer">https://colorswall.com/palette/3</a>).</li> <li>Press "Export" button. <img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.imgur.com%2FY6UL2ns.gif" alt="Export colors palette to SCSS,LESS,CSS variables file"> </li> <li>Choose file type SCSS, LESS or CSS and press "Download" button.</li> <li>Save file and enjoy.</li> </ol> <p>Video version<br> <iframe width="710" height="399" src="https://www.youtube.com/embed/M-APND5GUqE"> </iframe> </p> scss css less webtool colorswall Fri, 06 Jul 2018 21:38:17 +0000 https://dev.to/colorswall/generate-color-palette-for-your-website-5amn https://dev.to/colorswall/generate-color-palette-for-your-website-5amn <ol> <li><p>Visit <a href="https://colorswall.com/palette/generate" rel="noopener noreferrer">ColorsWall</a> and Sing Up.</p></li> <li><p>Press "Generate" button.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F28v2x0rhmcn5o1f4ulo1.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2F28v2x0rhmcn5o1f4ulo1.gif" alt="Colorswall Generate color palette"></a></p></li> <li><p>Sort or customize colors.</p></li> <li><p>Save your palette.</p></li> <li><p>Enjoy.</p></li> </ol> <p>Video version<br> <iframe width="710" height="399" src="https://www.youtube.com/embed/qxS66Tu0738"> </iframe> </p> colors palette web