A CSS Triangle Generator paints your chosen color on exactly one border of a zero-size element — the border that points in the direction you select — while the two perpendicular borders stay transparent so the slopes show through. The color field only accepts a hash followed by exactly six hexadecimal digits, normalized to lowercase, and that single HEX value is the entire color vocabulary of the tool. Because alpha, gradients, currentColor, and CSS variables are not generated, choosing the right HEX for the right direction is the only way the triangle will look correct on the page. A wrong color input is rejected rather than silently clamped, so a moment spent validating your HEX before pasting it back into your stylesheet saves debugging time later. The preview and the copied code share the same derived border declarations, so the color you see is the color that lands in your CSS, with no server round-trip and no surprise tokenization. Choosing color well in this context means picking one opaque HEX that survives the four-direction border trick, contrasts against the real background where the triangle will sit, and does not bleed into the transparent side borders that the geometry depends on.
What the Generator Accepts as a Color
The color input is intentionally narrow: a hash character followed by six hexadecimal digits, written in lowercase after the page normalizes your entry. That covers values like #2c7be5, #000000, and #ffffff, but nothing else. Named CSS colors such as "tomato" or "steelblue", three-digit shorthand like #abc, eight-digit alpha HEX such as #2c7be5cc, rgb() and hsl() functions, CSS variables, and color-mix expressions are not accepted by the CSS Triangle Generator and will be rejected rather than silently rewritten. Because the live preview uses the same derived border declarations shown in the CSS output, typing an invalid value simply leaves the previous valid color in place — there is no warning dialog, and there is no fallback. The browser's input controls constrain ordinary typing, while the underlying generator independently rejects malformed input so programmatic calls cannot smuggle an alpha channel into the result. The dimensions follow the same discipline: width and height must be whole integers between ten and three hundred pixels, and decimals or out-of-range values are rejected rather than quietly clamped.
The six-digit HEX you choose is painted as an opaque border. There is no transparency slider, no alpha channel, and no gradient — the color you see is the color that ships in the copied CSS. If your design needs translucency or a gradient fill, the HEX this generator produces is the wrong starting point, and the section on color limits below covers the alternatives. Knowing that the painted border is fully opaque also has a practical consequence for contrast: the triangle will sit as a solid shape on whatever background it lands on, and a HEX that looks fine in a flat mockup can disappear in a real interface with a layered background.
Choosing a HEX and Verifying the Result
Picking a HEX for a CSS triangle is a small decision with outsized consequences, because the same value will be painted on one border and judged against whatever sits behind the element. The steps below walk through the choice from input to pasted CSS.
- Pick a direction first, because the chosen HEX is painted on only one border — the one that points in your selected direction — and the two perpendicular borders must remain transparent for the slopes to render.
- Type or paste a hash plus exactly six hexadecimal digits into the color field and confirm the preview refreshes immediately. If the field rejects your entry, check for an extra space, a stray alpha digit, or a named color in place of HEX.
- Inspect the preview against the actual background color, image, or pattern where the triangle will be placed. A HEX that looks correct on white can be invisible on a tinted surface, so verify on the real destination rather than the generator's default backdrop.
- Click Copy CSS and Copy HTML separately. Each request asks for clipboard permission in turn, and a successful status names the format that was copied. If browser policy denies clipboard access, both code blocks remain visible so you can select the text manually.
- After pasting, rename the default class if it conflicts with an existing stylesheet, and update both the CSS and HTML outputs together so the class still matches. If you maintain a design token system, replace the literal HEX in your stylesheet copy with the equivalent token, but verify that the syntax is supported in your build and that the transparent side borders remain transparent.
Which Border Actually Carries Your Color
Choosing a HEX without knowing which border receives it is the most common reason a generated triangle comes out the wrong color or the wrong size. The border trick paints the visible shape entirely from borders, so direction is not just orientation — it is the literal assignment of one border to your color. Upward triangles use transparent left and right borders plus a colored bottom border. Downward triangles use a colored top border. Leftward triangles use transparent top and bottom borders plus a colored right border. Rightward triangles use a colored left border. Your HEX has to land on the right border, and the two perpendicular borders must stay transparent or the shape collapses into a filled rectangle.
| Direction | Colored border | Transparent borders | Dimension relationship |
|---|---|---|---|
| Up | border-bottom | left, right | transparent sides add up to width; bottom equals height |
| Down | border-top | left, right | transparent sides add up to width; top equals height |
| Left | border-right | top, bottom | transparent top and bottom add up to height; right equals width |
| Right | border-left | top, bottom | transparent top and bottom add up to height; left equals width |
For vertical triangles, the two transparent side borders add up to the requested width and the colored border equals the requested height. For horizontal triangles, the transparent top and bottom borders add up to the requested height and the colored border equals the requested width. Even dimensions split cleanly across the two transparent borders. Odd dimensions use floor and ceiling values, such as 20px and 21px for a 41px base, because Chromium can quantize two 20.5px borders down to 20px each and silently lose a pixel. The generator writes each longhand explicitly so the geometry stays auditable, and you can read the exact border widths in the copied CSS without guessing.
Contrast, Themes, and the Background That Matters
A triangle placed next to text inherits contrast obligations that a decorative shape on its own does not. The opaque HEX you choose will sit as a solid region against whatever it touches, and that region can grow visually larger than its measured dimensions because the painted borders extend beyond the zero-size content box. Test the final placement against a color contrast checker rather than guessing from the swatch in isolation. If the triangle communicates meaning, the surrounding control should carry accessible text or labeling; the triangle itself ships with aria-hidden true, which is correct for a decorative arrow but wrong when the shape conveys state or direction.
Color choice also has to survive theming. A HEX that reads well on a light surface can vanish on a dark surface, and the generator emits one literal value with no automatic switch. If your design uses light and dark themes, pick the HEX that contrasts against both, or plan to swap the literal in your stylesheet after copying. Forced-colors mode in Windows and high-contrast settings on other platforms can override your color entirely, so verify that the surrounding context remains legible when the triangle's HEX is replaced by a system color. Browsing the final result at 200 percent zoom, on a mobile width, and inside forced-colors emulation catches most of the surprises before users do. Keep in mind that the live preview confirms the border geometry but not the complete accessibility or layout behavior of the destination component, so the contrast decision is yours, not the tool's.
What This Color Cannot Do (and What Replaces It)
The HEX this generator emits is opaque, flat, and straight-edged. It cannot directly create a rounded tip, a curved edge, a hollow shape, a gradient fill, a stroke, a soft shadow, or an arbitrary polygon — all of those require the geometry of SVG with an explicit viewBox or the mask-and-shape power of clip-path. The rounded or outlined CSS triangles guide walks through the honest limits of the border trick and the points at which a different tool becomes the right answer.
The generator also does not produce alpha colors, CSS variables, gradients, currentColor, wide-gamut syntax, or design tokens. That is a deliberate scope decision: it ships one verified HEX that the browser will paint exactly as typed. Once that HEX is in your stylesheet, you can replace it with a theme token, but you should verify that the token syntax your build emits is supported in the target browsers and that the transparent side borders remain transparent — a token that resolves to a translucent value on the slopes would fill in the triangle and erase the shape. For most production work, the right pattern is to keep the generator's literal HEX during initial layout, swap to a token before shipping, and re-test in light and dark themes. The border declarations themselves are documented in MDN's backgrounds and borders guide and in the CSS Backgrounds and Borders specification, both of which define the longhand widths, styles, and colors the generator writes explicitly.
For a deeper look, see Hex to RGB Explained: CSS Notation and Channel Math.