Imageslot Color Customization & Accessibility Guide

Learn how to control background, text, and shadow colors in Imageslot. Create on-brand, accessible placeholder images for web design, UI, and marketing—all with easy hex code parameters and pro-level tips.

What is Color Customization in Imageslot?

Color customization lets you set the background, text (foreground), and shadow colors of your Imageslot placeholder images—directly in the API URL. This helps you:

Match your brand palette or project guidelines
Improve readability and user experience
Ensure accessibility for all users
Make prototypes, wireframes, and previews visually realistic

Pro Tip: Consistent color usage strengthens your brand and improves the clarity of your UI mockups.

Imageslot Color Parameters Explained

bg (Background)

Sets the background color of your image. Accepts hex codes (e.g. bg=3DA35D for green) or bg=transparent for PNGs.

?bg=3DA35D

Great for setting brand or theme colors.

fg (Foreground/Text)

Controls the color of the text overlay. Accepts hex codes (e.g. fg=23272F for dark gray).

?fg=23272F

For readability, always check fg/bg contrast.

shadow (Text Shadow)

Optional. Sets the color of the drop shadow behind text. Accepts hex codes (e.g. shadow=173559). Helps boost contrast on busy or bright backgrounds.

?shadow=173559

Use shadow for extra legibility on light backgrounds.

See full API color parameter list

How to Use Hex Codes in Imageslot URLs

Hex codes are 6-digit codes representing colors (e.g., #173559 for deep blue). In Imageslot URLs, don’t include the #—just use the 6 digits or letters directly.

Correct: ?bg=3DA35D
Incorrect: ?bg=#3DA35D (do not use #)

Pro Tip: Find hex codes using our color picker tool or browser developer tools.

Example Imageslot URL: /v1/600x200?bg=173559&fg=fff&text=Hex+Colors&filetype=png imageslot hex code color preview||hex code url, color customization, web design#|#Imageslot example with hex code color parameters applied#|#hex-code-demo.jpg

imageslot hex code color preview||hex code url, color customization, web design#|#Imageslot example with hex code color parameters applied#|#hex-code-demo.jpg

Common mistakes:

Using # in the value (should be omitted)
Misspelling hex code or using only 3 digits (always use full 6 digits)
Trying to use named colors (e.g. red, blue)—only hex or transparent is supported for bg

Best Practices for Accessible Colors in Imageslot

Accessible color combinations ensure everyone—including users with low vision or color blindness—can read your placeholder text. Good contrast also enhances clarity during design reviews and handoff.

Use high-contrast pairs (e.g., dark text on light background, or vice versa)
Avoid color combos like light gray text on white, or red on green
Test your combination with our color contrast tool

For WCAG compliance, aim for at least 4.5:1 contrast ratio for normal text.

Good Contrast

Poor Contrast

Pro Tip: If background and text colors are too similar, add a shadow color for extra readability.

Sample Color Combinations for Imageslot

/v1/320x80?bg=173559&fg=fff&shadow=3DA35D&text=Sample+1&filetype=png Deep blue background, white text, green shadow (default style)

/v1/320x80?bg=3DA35D&fg=fff&shadow=173559&text=Sample+2&filetype=png Vibrant green background, white text, blue shadow

/v1/320x80?bg=fff&fg=23272F&shadow=1A726B&text=Sample+3&filetype=png White background, dark text, teal shadow (very readable)

/v1/320x80?bg=ececec&fg=6C757D&shadow=23272F&text=Sample+4&filetype=png Light gray background, medium gray text, dark shadow (neutral)

/v1/320x80?bg=23272F&fg=fff&shadow=3DA35D&text=Sample+5&filetype=png Charcoal background, white text, green shadow (for dark mode previews)

/v1/320x80?bg=1A726B&fg=fff&shadow=23272F&text=Sample+6&filetype=png Teal background, white text, dark shadow (modern/brand look)

Live Demo: Experiment with Imageslot Colors

Copy the URL above for use in your code or design tools.

Try our color picker tool Full API Reference

Common Color Mistakes & Pro Tips

Common Pitfalls

Using low-contrast color combinations (e.g., light gray on white)
Forgetting to remove # from hex codes in URLs
Using named colors (red, blue) instead of hex
Specifying unsupported color formats (e.g., rgb(), hsl())
Not updating all parameters when changing your palette
Neglecting shadow color, resulting in unreadable text

Pro Tips

Use your brand colors for bg and fg to match your site or app
Add a subtle shadow (shadow=23272F) for extra clarity on busy backgrounds
Test color combos on multiple screens for contrast
Use the color picker tool to get perfect hex codes
Check API docs for all color parameter options

FAQ: Imageslot Color Customization & Accessibility

Imageslot supports 6-digit hex codes (e.g., 173559 for blue), and for the background parameter (bg), you can also use transparent (for PNG images). Named colors, RGB, or HSL formats are not supported—always use hex or transparent for bg.

Choose color combinations with high contrast between background and text. Use our color picker tool to check contrast. For best accessibility, follow WCAG guidelines and add a shadow for text clarity as needed.

Double-check that you’re using a full 6-digit hex code without the # symbol. Typo in the code, unsupported format, or accidentally using a named color will cause the parameter to be ignored. Also, ensure your browser cache isn’t showing an old version—refresh the image or add a unique query string like &cb=1 to force reload.

Yes! Our color picker tool lets you select any color, copy the hex code, and paste it into your Imageslot URL. This ensures perfect accuracy and helps you check for accessibility, too.

Try our Color Picker Tool Pick perfect hex codes, check contrast, and copy for Imageslot.

See Accessibility Guidelines Best practices for accessible color combos and UI placeholders.

Full API Reference See all color parameters, examples, and advanced options.