彩色彩虹文字生成器

使用此 HTML 和 CSS 生成器在线创建彩色彩虹文字。输入或粘贴文字，选择配色方案，即可获得可直接使用的代码：按字母着色、按词着色、 渐变彩虹标题、动画效果，以及适用于社交媒体帖子的 PNG 或 SVG 图片。

本页面提供在线生成器、PNG 和 SVG 导出选项、分步说明、CSS 和 JavaScript 代码示例、方法对比表、使用场景和常见问题。

以下是一些彩虹彩色文字示例 彩虹文字演示

目录

什么是彩虹文字？

彩虹文字是指每个字母、单词或行使用不同颜色或平滑渐变的文字。这是让标题、横幅、社交媒体帖子和装饰标签 脱颖而出的一种流行方式，无需使用图片。

创建彩虹文字主要有三种方法：

  • CSS 渐变 + background-clip - 使用线性渐变作为文字填充，并按文字形状裁剪。
  • 带内联颜色的 HTML span - 每个字母或单词包裹在带独立颜色的 <span> 中。
  • JavaScript 颜色分配 - 脚本动态拆分文字并应用 HSL 颜色。

本页面的生成器支持以上三种输出样式。请参阅下方的 方法对比，选择最适合您项目的方案。

彩虹文字生成器 - 使用 Google Fonts、按字母着色、渐变标题生成彩色文字及 HTML CSS 代码
彩虹文字生成器：使用 Google Fonts、按字母着色、渐变标题生成彩色文字，以及可直接复制的 HTML 和 CSS。

在线彩虹文字生成器

使用下方交互工具创建彩虹彩色文字。生成器输出可直接复制到网站的 HTML 和 CSS，选择网络字体时还可提供可选的 Google Fonts 链接。

工具显示实时预览、Google Fonts 链接（如适用），以及独立的 HTML 和 CSS 代码块。使用复制、运行、编辑和下载按钮将代码应用到您的网站。

1

在此添加文字

12 / 1000
英语、法语、德语、...
മലയാളം हिंदी 中文 বাংলা
عربى
2

选择颜色组

    3

    着色方式

    每个字母颜色不同
    每个 词 颜色 不同
    4

    颜色亮度

    背景：
    彩虹颜色预览
    大小
    阴影颜色

    您可以复制并粘贴此彩色文字到 Google Docs 和 Gmail 编辑器中。但此彩色文字无法直接在 Facebook 和 Instagram 上分享。您需要将其转换为图片；下方选项可将其转换为图片格式。

    彩虹文字转图片

    您可以将此彩虹文字转换为 PNG 格式图片，或导出为 SVG。然后可轻松在 Facebook 帖子或 Instagram 故事中分享该图片。

    生成的 HTML 和 CSS 代码。复制并粘贴到您的网站。

    Google Fonts 链接
    HTML
    <div class="rainbow-text">
    <span class="block-line"><span><span style="color:#ff0000">H</span><span style="color:#ff5500">T</span><span style="color:#ffaa00">M</span><span style="color:#ffff00">L&nbsp;</span></span><span><span style="color:#aaff00">C</span><span style="color:#55ff00">S</span><span style="color:#00ff00">S&nbsp;</span></span><span><span style="color:#00ff55">彩</span><span style="color:#00ffaa">虹</span><span style="color:#00ffff">文</span><span style="color:#00aaff">字</span></span></span>
</div>
    CSS
    .rainbow-text {
    font-family: Arial Black, Gadget, sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 50px;
    text-shadow: 1px 1px 0px #A3A3A3;
}
.rainbow-text .block-line > span {
    display: inline-block;
}

    使用方法

    按照以下步骤，使用上方生成器创建彩虹文字。

    1. 在生成器的文本框中输入文字。
    2. 选择配色方案（彩虹主题、VIBGYOR 七色彩虹、随机混合、圣诞节主题色彩或自定义颜色方案）。
    3. 选择着色模式：按字母、按词或渐变（按字母、按词或按行）。
    4. 调整饱和度和亮度，获得理想效果。
    5. 根据需要设置字体、大小、阴影、轮廓和背景。
    6. 预览效果，如需新配色可刷新颜色。
    7. 复制 HTML 和 CSS 代码，或导出 PNG 图片或 SVG 文件用于社交媒体。
    8. 将代码粘贴到网站或文档中，或将图片上传到帖子。

    功能特点

    • 按字母和按词着色
    • 字母、单词或行的彩虹渐变
    • 多种预设配色和自定义颜色
    • 多语言字母拆分（英语、马拉雅拉姆语、印地语、中文、孟加拉语、阿拉伯语）
    • Google Fonts 集成
    • 文字阴影和轮廓控制
    • 带社交媒体预设尺寸的 PNG 导出
    • 文字转图片后可输出 SVG 格式
    • 可复制粘贴的 HTML 和 CSS 代码输出
    • 带刷新控件的实时预览
    • 无需安装或注册

    CSS、HTML 与 JavaScript 方法对比

    根据需求选择合适的技术：

    方法 适用场景 优点 缺点
    CSS 渐变 + background-clip 标题、静态页眉 轻量、单元素、平滑渐变 无法真正按字母着色；逐字符控制有限
    HTML span（工具输出） 任意文字、多色字母 通用性强、完全控制每个字符颜色 输出中包含更多 HTML 标签
    CSS 颜色动画 醒目标题 纯 CSS、无需额外 HTML 整段文字同时显示一种颜色（循环色相）
    JavaScript RainbowText 动态内容、CMS 字段 运行时自动为任意元素文字着色 需要 JavaScript；内容变化时需重新运行

    CSS 彩虹渐变文字

    使用 CSS 线性渐变作为文字填充。通过 background-clip: text 和 -webkit-text-fill-color: transparent 将渐变裁剪为文字形状。

    预览：

    HTML
    <div class="css-rainbow-text">CSS 彩虹文字</div>
    CSS
    .css-rainbow-text {
    background: linear-gradient(90deg, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2b, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d4ff, #0af, #007fff, #05f, #002bff, #00f, #2a00ff, #50f, #7f00ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 50px;
    font-weight: bold;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
}

    CSS 动画彩虹渐变

    通过 CSS 关键帧动画移动 background-position 来实现渐变动画。 颜色从左到右在文字上流畅滚动。

    预览：

    HTML
    <div class="animated-rainbow">动画彩虹渐变</div>
    CSS
    .animated-rainbow {
    font-size: 42px;
    font-family: Arial Black, Gadget, sans-serif;
    background: linear-gradient(to left, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2a, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d5ff, #0af, #0080ff, #05f, #002aff, #00f, #2b00ff, #50f, #8000ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
    background-size: 500px 100%;
    animation: rainbow-move-left-right 5s linear infinite alternate;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

@keyframes rainbow-move-left-right {
    0%   { background-position: 0 0; }
    100% { background-position: -500px 0; }
}

    CSS 动画彩虹颜色

    不使用渐变，而是对 color 属性进行动画，循环彩虹色相。 整段文字依次经过红、橙、黄、绿、蓝、靛、紫。

    预览：

    HTML
    <div class="animated-rainbow-2">动画彩虹颜色</div>
    CSS
    .animated-rainbow-2 {
    font-size: 42px;
    font-family: Arial Black, Gadget, sans-serif;
    animation: rainbow-color-change 3s linear infinite alternate;
}

@keyframes rainbow-color-change {
    0%, 100% { color: #ff0000 }
    14%      { color: #ff8b00 }
    28%      { color: #e8ff00 }
    42%      { color: #5dff00 }
    56%      { color: #00b9ff }
    70%      { color: #5d00ff }
    84%      { color: #e800ff }
}

    JavaScript 彩虹文字

    当文字内容在运行时发生变化，且您希望自动为每个字符着色而无需手写 HTML span 时，可使用 JavaScript。 下方的 RainbowText 类会拆分元素文字，并将每个字符包裹在带颜色的 <span> 中。

    预览：

    JavaScript 彩虹文字
    低亮度文字
    HTML
    <div id="js-rainbow-1">JavaScript 彩虹文字</div>
<div id="js-rainbow-2">低亮度文字</div>
    CSS
    #js-rainbow-1, #js-rainbow-2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 50px;
}
    JavaScript
    class RainbowText {
    constructor(elements, saturation = 100, lightness = 50) {
        this.saturation = this.clamp(saturation, 20, 100);
        this.lightness = this.clamp(lightness, 20, 99);
        // script - https://www.html-code-generator.com/zh/html/rainbow-text-generator
        const elementArray = elements instanceof NodeList ? Array.from(elements) : [elements];
        elementArray.forEach(element => this.applyColor(element));
    }

    clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
    }

    applyColor(element) {
        const text = element.textContent;
        if (!text) return;
        const chars = [...text];
        const hueStep = 360 / Math.max(chars.length - 1, 1);
        const html = chars.map((char, index) => {
          const hue = Math.round(hueStep * index);
          const color = `hsl(${hue}, ${this.saturation}%, ${this.lightness}%)`;
          const safe = char
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;');
          return `<span style="color:${color}">${safe}</span>`;
        }).join('');
        element.innerHTML = html;
    }
}
    JavaScript
    // 使用示例：
// 默认样式
new RainbowText(document.getElementById("js-rainbow-1"));

// 调整颜色亮度：saturation = 40, lightness = 50
new RainbowText(document.getElementById("js-rainbow-2"), 40, 50);

    使用场景

    • 网站标题和主视觉横幅
    • 社交媒体帖子和故事（PNG 或 SVG 导出）
    • 电子邮件签名和新闻通讯标题
    • Discord 和聊天中的彩色显示名（以图片形式）
    • 节日和活动消息（圣诞节主题配色）
    • 教育活动和儿童字母涂色
    • 落地页上的 Logo 文字和装饰标签

    常见问题

    如何让每个字母显示不同颜色？

    使用本页面的彩虹文字生成器。输入文字，选择配色方案， 并将着色方式设为按字母拆分。工具会为每个字母包裹带颜色的 span， 并生成可直接复制的 HTML 和 CSS。

    能否在 Facebook 或 Instagram 上使用彩虹文字？

    Facebook 和 Instagram 不支持在帖子中直接粘贴 HTML 彩色文字。请使用本页面的 彩虹文字转图片功能，将文字导出为 PNG 图片，然后上传到帖子或故事中。

    彩虹文字在 Google Docs 中能用吗？

    可以。您可以复制生成的 HTML 彩虹文字，粘贴到 Google Docs 或 Gmail 编辑器中。 从工具输出粘贴时，按字母的颜色会保留。

    渐变着色和按字母着色有什么区别？

    按字母着色使用 HTML span 为每个字母或单词分配纯色。 渐变着色使用 CSS linear-gradient 和 background-clip text，在字母或单词之间实现平滑的颜色过渡。 渐变呈现流动的彩虹效果；按字母着色则为每个字符提供独立颜色。

    彩虹文字需要 JavaScript 吗？

    不需要。静态彩虹文字可以仅用 HTML span 和 CSS 创建。只有当你需要在运行时 动态着色会变化的文字时（例如从 CMS 加载的内容或用户输入）才需要 JavaScript。

    哪些浏览器支持 CSS 渐变文字？

    使用 background-clip: text 的 CSS 渐变文字可在所有现代浏览器中使用， 包括 Chrome、Firefox、Edge 和 Safari。请使用 -webkit-background-clip 和 -webkit-text-fill-color 以获得最佳兼容性。

    可以使用自定义颜色吗？

    可以。在彩虹文字生成器中，选择自定义颜色作为颜色组，并添加您自己的 十六进制或颜色值。您还可以调整饱和度和亮度来微调配色方案。

    如何将彩虹文字导出为图片？

    在生成器中创建彩虹文字后，打开彩虹文字转图片部分。 选择预设尺寸（如 Instagram Stories、Instagram Post 或 Facebook Post），调整 位置和边距，然后点击更新并下载图片以保存 PNG 文件，或下载 SVG 格式输出。

    支持阿拉伯语、印地语或其他文字吗？

    支持。生成器支持英语、马拉雅拉姆语、印地语、中文、孟加拉语和阿拉伯文字的字母拆分。 生成颜色前，请在字母拆分面板中选择相应的语言选项。

    能否仅用 CSS 为彩虹文字添加动画？

    可以。您可以使用纯 CSS 为彩虹文字添加动画，方式包括移动 linear-gradient 背景，或通过 color 属性动画循环彩虹色相。本页面代码示例部分演示了这两种技术。