# Using a link to get solid colors in components

**URL:** <https://community.glideapps.com/t/using-a-link-to-get-solid-colors-in-components/63260>\
**Category:** Community Resources\
**Tags:** tutorial\
**Created:** [June 28, 2023, 2:47pm UTC](https://community.glideapps.com/t/using-a-link-to-get-solid-colors-in-components/63260 "2023-06-28T14:47:41Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [June 28, 2023, 2:47pm UTC](https://community.glideapps.com/t/using-a-link-to-get-solid-colors-in-components/63260/1 "2023-06-28T14:47:41Z")

</div>

Hey, community! 👋

Today, I’d like to share a useful tip on how to achieve solid colors in Glide components using a specific link. If you’ve ever wondered how to set a consistent background color for different elements such as images, headers, or profile pictures in Glide, this post is for you!

* * *

**Step 1: Get the link**

First, we need to obtain the link for the desired solid color. We’ll use the website [singlecolorimage.com](http://singlecolorimage.com) to generate the link. Here’s an example link you can use:

> `https://singlecolorimage.com/get/18BED4/1000x1000`

In this link, `#18BED4` represents the hexadecimal code for the desired color (you can replace it with any valid hexadecimal code) and `1000x1000` sets the dimensions of the image. You can adjust the dimensions as needed to suit your preferences.

* * *

**Step 2: Applying the link in Glide**

Now that we have the link for the solid color, let’s apply it to different components in Glide. Here are a few ways to do it:

1. **For Images or Headers:** If you want to set a solid color for the images or header of a screen or section, add an “Image” or “Title” component in Glide. In the component’s settings panel, you’ll find the “Background Image” option. Paste the previously obtained link into this field to set the solid color as the header’s background.
2. **For Profile Pictures:** If you want to set a solid color for a user’s profile picture, add an “Image” component in Glide. In the “Image” property, insert the link we obtained earlier. This will make the profile picture display the solid color as the background.
3. **In the Template Column:** You can also use the link in the “Template” component to replace color data. For example, if you have a column named “Color” in your data sheet, you can use the link as follows: `https://singlecolorimage.com/get/{{Color}}/1000x1000`. This will make the “Template” component display the solid color based on the values in the “Color” column.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/0/4008f2509d9e577ad27a8edc2412354b3a3afea5.png)

* * *

**Step 3: Customizing colors and dimensions**

The great advantage of this approach is that you can easily customize colors and dimensions as needed. Simply change the hexadecimal code in the link to the desired color. If you prefer different dimensions for the image, adjust the width and height values in the link.

Remember to maintain proportional dimensions to avoid image distortion.

* * *

That’s it! 😃 Now you can add consistent solid colors to different Glide components using the obtained link. It’s a simple and effective way to customize your apps with a cohesive visual aesthetic.

Try it out and have fun exploring different color and dimension combinations to achieve impressive results!

If you have any further questions or would like to share your experiences, feel free to comment in this topic. I’m here to help!

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 28, 2023, 2:54pm UTC](https://community.glideapps.com/t/using-a-link-to-get-solid-colors-in-components/63260/2 "2023-06-28T14:54:04Z")

</div>

That’s all very nice, but… um, are you aware of the Image from Colour plugin column? 😉

> **[Glide • Image from Color column](https://www.glideapps.com/plugins/color-to-image)**
>
> Get an image based on a CSS color.

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [June 28, 2023, 2:56pm UTC](https://community.glideapps.com/t/using-a-link-to-get-solid-colors-in-components/63260/3 "2023-06-28T14:56:50Z")

</div>

Yes, of course!

I think this option I posted would be if the person wanted to customize the **dimensions** of the image/color, then I see that it makes more sense

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 28, 2023, 3:10pm UTC](https://community.glideapps.com/t/using-a-link-to-get-solid-colors-in-components/63260/4 "2023-06-28T15:10:08Z")

</div>

hehe, yeah I kind of guessed that 🙂  
But, to be honest, I don’t think changing the dimensions of the image actually makes any difference when you’re using it as (for example) a container background, as Glide will just adjust it to fill the space.

For example, both of the below give the same result when used as a container background:

```auto
https://singlecolorimage.com/get/18BED4/1000x1000

```

```auto
https://singlecolorimage.com/get/18BED4/1000x1

```

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [June 28, 2023, 3:11pm UTC](https://community.glideapps.com/t/using-a-link-to-get-solid-colors-in-components/63260/5 "2023-06-28T15:11:50Z")

</div>

Yes, so maybe this is obsolete

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [June 28, 2023, 3:16pm UTC](https://community.glideapps.com/t/using-a-link-to-get-solid-colors-in-components/63260/6 "2023-06-28T15:16:43Z")

</div>

mmm, maybe not. I was just experimenting with it a bit, and the following in an image component makes for a nice looking separator…

```auto
https://singlecolorimage.com/get/18BED4/1000x4

```

 ![CleanShot 2023-06-28 at 23.15.37@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/4/144fb223b46c36ef39108f054535d3abef1fa53a.jpeg)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [June 28, 2023, 3:41pm UTC](https://community.glideapps.com/t/using-a-link-to-get-solid-colors-in-components/63260/7 "2023-06-28T15:41:00Z")

</div>

Exactly! We can explore the use cases

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 29, 2023, 1:11am UTC](https://community.glideapps.com/t/using-a-link-to-get-solid-colors-in-components/63260/8 "2023-06-29T01:11:47Z")

</div>

Thanks for sharing!